<template>
  <div class="app-container">
    <div class="tablist">
      <span
        class="name"
        v-for="(item,index) in tabs"
        :class="{active:(indexs==index)}"
        @click="handleTabs(index)"
        :key="index"
      >{{item.name}}</span>
    </div>
    <div class="workorder">
      <!-- 催单工单 -->
      <div v-if="indexs==0">
        <div class="filter_container">
          <el-form :inline="true" :model="remindersform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select
                v-model="deptName"
                placeholder="请选择城市"
                size="small"
                style="width: 100px;"
                @change="handleCity"
                ref="deptNameRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="(house,citykey) in cityList"
                  :key="citykey"
                  :label="house.deptName"
                  :value="{value:house.id,label:house.deptName}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input
                v-model.trim="remindersform.xmbzNo"
                size="small"
                style="width: 160px"
                @keyup.enter.native="handleFilterReminders(Launchdate)"
                clearable
                placeholder="请输入后台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input
                v-model.trim="remindersform.operator"
                size="small"
                style="width: 160px"
                @keyup.enter.native="handleFilterReminders(Launchdate)"
                clearable
                placeholder="请输入申请人"
              ></el-input>
            </el-form-item>
            <el-form-item label="配送员">
              <el-input
                v-model.trim="remindersform.delivery"
                size="small"
                style="width: 160px"
                @keyup.enter.native="handleFilterReminders(Launchdate)"
                clearable
                placeholder="请输入配送员"
              ></el-input>
            </el-form-item>
            <el-form-item label="催单类型">
              <el-select
                ref="reminderTypeRef"
                v-model="remindersform.reminderType"
                placeholder="请选择催单类型"
                clearable
                size="small"
                style="width: 140px"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="item in remindertypeList"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <el-date-picker
                v-model="Launchdate"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="right"
                size="small"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                icon="el-icon-search"
                @click="handleFilterReminders(Launchdate)"
                size="small"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="work_list" v-for="item in reminderslist" :key="item.index">
          <div class="order-num">
            <span>后台单号：{{item.xmbzNo}}</span>
            <i></i>
          </div>
          <div class="work_lists">
            <div class="line">
              <p>
                <em>申请人：</em>
                {{item.operator}}
              </p>
              <p>
                <em>创建工单时间：</em>
                {{item.createTime}}
              </p>
              <p>
                <em>配送时间：</em>
                {{item.deliveryTime}}
              </p>
            </div>
            <div class="line">
              <p>
                <em>配送员：</em>
                {{item.delivery}}
              </p>
              <p>
                <em>渠道：</em>
                {{item.channel}}
              </p>
              <p>
                <em>催单类型：</em>
                <span v-if="item.reminderType==1">配送时间前催单</span>
                <span v-if="item.reminderType==2">配送时间内催单</span>
                <span v-if="item.reminderType==3">超时催单</span>
              </p>
            </div>
            <div class="line">
              <p>
                <em>城市：</em>
                {{item.cityName}}
              </p>
              <p>
                <em>分仓：</em>
                {{item.warehouse}}
              </p>
            </div>
          </div>
          <div class="work_lists">
            <div class="line">
              <p>
                <em>催单内容：</em>
                {{item.reminderContent}}
              </p>
            </div>
          </div>
        </div>
        <div class="work_list" v-if="reminderslist.length<=0">
          <p class="nodata">暂无数据</p>
        </div>
        <pagination
          v-show="reminderstotal>0"
          :total="reminderstotal"
          :page.sync="remindersform.page"
          :limit.sync="remindersform.size"
          @pagination="getWorkOrderList"
        />
      </div>
      <!-- 备款 -->
      <div v-if="indexs==1">
        <div class="filter_container">
          <el-form :inline="true" :model="damagedform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select
                v-model="deptNamedamag"
                placeholder="请选择城市"
                size="small"
                style="width: 100px;"
                @change="handleCitydamag"
                ref="deptNameRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="(house,citykey) in cityList"
                  :key="citykey"
                  :label="house.deptName"
                  :value="{value:house.id,label:house.deptName}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input
                v-model.trim="damagedform.xmbzNo"
                size="small"
                style="width: 160px"
                @keyup.enter.native="handleFilterReserve(Launchdate2)"
                clearable
                placeholder="请输入后台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input
                v-model.trim="damagedform.operator"
                size="small"
                style="width: 130px"
                @keyup.enter.native="handleFilterReserve(Launchdate2)"
                clearable
                placeholder="请输入申请人"
              ></el-input>
            </el-form-item>
            <el-form-item label="责任部门">
              <el-select
                v-model="damagedform.personDept"
                clearable
                placeholder="请选择部门"
                size="small"
                style="width: 120px;"
                ref="damagedformRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="item in departmentList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="责任人">
              <el-input
                v-model.trim="damagedform.personLiable"
                size="small"
                style="width: 130px"
                @keyup.enter.native="handleFilterReserve(Launchdate2)"
                clearable
                placeholder="请输入责任人"
              ></el-input>
            </el-form-item>
            <el-form-item label="备款状态">
              <el-select
                ref="provisionsStatusRef"
                v-model="damagedform.provisionsStatus"
                placeholder="请选择备款状态"
                clearable
                size="small"
                style="width: 140px;"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="item in provisionsOperationList"
                  :key="item.dictKey"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <el-date-picker
                v-model="Launchdate2"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="right"
                size="small"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="蛋糕去向">
              <el-select
                ref="cakeWhereaboutsRef"
                v-model="damagedform.cakeWhereabouts"
                placeholder="请选择蛋糕去向"
                clearable
                size="small"
                style="width: 180px;"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="item in cakewherelist"
                  :key="item.dictKey"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- provisionsOperationList -->
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="handleFilterReserve(Launchdate2)"
                icon="el-icon-search"
                size="small"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="damage">
          <div class="damagemain" ref="damagemain">
            <div
              class="damage_list"
              v-for="(item,index) in damagedList"
              :key="index"
              @click="headReserveDetils(item,index,'damageformEdit')"
            >
              <img :src="checked" alt="" v-if="damagelistindex == index" class="imgurl">
              <div class="credittype finish" v-if="item.provisionsStatus==1">
                <span class="tips">已抵用</span>
              </div>
              <div class="credittype" v-if="item.provisionsStatus==2">
                <span class="tips">未抵用</span>
              </div>
              <div class="order-num">
                <span>后台单号：{{item.xmbzNo}}</span>
                <i></i>
              </div>
              <div class="line">
                <!-- <p>
                  <em>蛋糕款式：</em>
                  {{item.goodsName}}~ {{item.orderDetailId}}
                </p>-->
                <p style="display: block;">
                  <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                  <span>{{item.goodsName}}~{{item.orderDetailId}}</span>
                </p>
                <p style="display: flex;">
                  <em>备款内容：</em>
                  <span
                    style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                  >{{item.provisionsContent}}</span>
                </p>
              </div>
              <div class="damage_lists">
                <div class="line">
                  <p>
                    <em>申请人：</em>
                    {{item.operator}}
                  </p>
                  <p>
                    <em>创建工单时间：</em>
                    {{item.createTime}}
                  </p>
                  <p>
                    <em>蛋糕去向：</em>
                    {{item.cakeWhereaboutsName}}
                  </p>
                  <p>
                    <em>城市：</em>
                    {{item.cityName}}
                  </p>
                  <p>
                    <em>分仓：</em>
                    {{item.branchWarehouse}}
                  </p>
                  <!-- <p>
                    <em>蛋糕编码:</em>
                    {{item.orderDetailId}}
                  </p>-->
                </div>
                <div class="line">
                  <p>
                    <em>责任人：</em>
                    {{item.personLiable}}
                  </p>
                  <p>
                    <em>责任部门：</em>
                    {{item.personDeptName}}
                    <!-- {{damageformPersonName}} -->
                  </p>
                  <p v-if="item.provisionsStatus==1" class="red">
                    <em>抵用单号：</em>
                    <span>{{item.offsetNo}}</span>
                  </p>
                  <p v-if="item.provisionsStatus==1">
                    <em>抵用时间：</em>
                    <span>{{item.offsetTime}}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="work_list" v-if="damagedList.length<=0">
              <p class="nodata">暂无数据</p>
            </div>
            <pagination
              v-show="damagetotal>0"
              :total="damagetotal"
              :page.sync="damagedform.page"
              :limit.sync="damagedform.size"
              @pagination="getReserveOrderList"
            />
          </div>
          <div class="damage_con" v-if="damagedialogStatus=='update'">
            <el-form
              ref="damageformEdit"
              :rules="damageformrules"
              :model="damageformEdit"
              label-width="100px"
            >
              <el-form-item label="创建工单时间">
                <span>{{damageformEdit.createTime}}</span>
              </el-form-item>
              <el-form-item label="蛋糕去向">
                <el-select
                  v-model="damageformEdit.cakeWhereaboutsName"
                  v-if="damageStatus==='update'"
                  placeholder="请选择部门"
                  size="small"
                  style="width: 120px;"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="item.dictValue"
                    v-for="item in cakewherelist"
                    :key="item.id"
                  ></el-option>
                </el-select>
                <span v-if="damageStatus==='create'">{{damageformEdit.cakeWhereaboutsName}}</span>
              </el-form-item>
              <el-form-item label="责任部门">
                <el-select
                  v-model="damageformPersonName"
                  v-if="damageStatus==='update'"
                  placeholder="请选择责任部门"
                  @change="getdamageformPersonDept"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="{label:item.dictValue,value:item.dictKey}"
                    v-for="item in departmentList"
                    :key="item.id"
                  ></el-option>
                </el-select>
                <span v-if="damageStatus==='create'">{{damageformEdit.personDeptName}}</span>
              </el-form-item>
              <el-form-item label="申请人">
                <span>{{damageformEdit.operator}}</span>
              </el-form-item>
              <el-form-item label="责任人" required>
                <el-input
                  v-model.trim="damageformEdit.personLiable"
                  v-if="damageStatus==='update'"
                  class="inputType"
                  size="small"
                  type="textarea"
                  maxlength="10"
                  show-word-limit
                ></el-input>
                <span v-if="damageStatus==='create'">{{damageformEdit.personLiable}}</span>
              </el-form-item>
              <el-form-item label="备款内容" required>
                <el-input
                  v-model.trim="damageformEdit.provisionsContent"
                  type="textarea"
                  maxlength="50"
                  show-word-limit
                  :autosize="{ minRows: 6, maxRows:8}"
                  size="small"
                  v-if="damageStatus==='update'"
                ></el-input>
                <p
                  v-if="damageStatus==='create'"
                  class="processingResults"
                >{{damageformEdit.provisionsContent}}</p>
              </el-form-item>
              <el-form-item label="抵用单号" v-if="damageStatus==='update'">
                <el-input
                  v-model="damageformEdit.offsetNo"
                  size="small"
                  type="number"
                  :disabled="true"
                  v-if="damageformEdit.provisionsStatus==1"
                ></el-input>
                <el-input
                  v-model.trim="damageformEdit.offsetNo"
                  size="small"
                  type="number"
                  v-else
                  maxlength="24"
                  onkeyup="value=value.replace(/[^\d]|^[0]/g,'').slice(0,24)"
                  required
                ></el-input>
              </el-form-item>
              <el-form-item
                label="抵用单号"
                v-if="damageformEdit.provisionsStatus==1&&damageStatus==='create'"
              >
                <span>{{damageformEdit.offsetNo}}</span>
              </el-form-item>
              <div class="buttontips">
                <el-button
                  type="primary"
                  size="small"
                  plain
                  @click="handlerEditdamage(damageformEdit)"
                  v-if="damageShow"
                >编辑</el-button>
                <el-button
                  type="success"
                  size="small"
                  plain
                  @click="handlerSavedamage(damageformEdit,'damageformEdit')"
                  v-if="damageEditShow"
                >保存</el-button>
                <el-button
                  type="warning"
                  size="small"
                  plain
                  @click="handlerdamageCancel(damageformEdit,'damageformEdit')"
                  v-if="damageEditShow"
                >取消</el-button>
                <!-- <el-button type="success" size="small" plain @click="handlerSavedamages(damageformEdit)" v-if="damageStatus==='create'">保存</el-button> -->

                <el-button
                  type="info"
                  size="small"
                  plain
                  @click="handlerLogdamage(damageformEdit)"
                  v-if="Logdamageshow"
                >日志</el-button>
              </div>
            </el-form>
          </div>
          <div class="damage_con Nodata" v-else>请选择订单</div>
        </div>
      </div>
      <!-- 投诉 -->
      <div v-if="indexs==2">
        <div class="filter_container">
          <el-form :inline="true" :model="Complaintform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select
                v-model="deptNameComplaint"
                placeholder="请选择城市"
                size="small"
                style="width: 100px;"
                @change="handleCityComplaint"
                ref="deptNameRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="(house,citykey) in cityList"
                  :key="citykey"
                  :label="house.deptName"
                  :value="{value:house.id,label:house.deptName}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input
                v-model.trim="Complaintform.xmbzNo"
                size="small"
                style="width: 160px"
                @keyup.enter.native="handleFiltercomplaint(Launchdate3)"
                clearable
                placeholder="请输入后台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input
                v-model.trim="Complaintform.platformNo"
                size="small"
                style="width: 140px"
                @keyup.enter.native="handleFiltercomplaint(Launchdate3)"
                clearable
                placeholder="请输入平台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input
                v-model.trim="Complaintform.operator"
                size="small"
                style="width: 130px"
                @keyup.enter.native="handleFiltercomplaint(Launchdate3)"
                clearable
                placeholder="请输入申请人"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model.number="Complaintform.phone"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                onafterpaste="value=value.replace(/[^\-?\d.]/g,'')"
                @keyup.enter.native="handleFiltercomplaint(Launchdate3)"
                maxlength="11"
                size="small"
                style="width: 140px"
                clearable
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="处理状态">
              <el-select
                ref="handleStateRef"
                v-model="Complaintform.handleState"
                placeholder="请选择处理状态"
                clearable
                size="small"
                style="width: 140px;"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="(item,index) in dealstatusList"
                  :key="index"
                  size="small"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门失误类型">
              <el-select
                ref="responsibleDepartmentRef1"
                v-model="responsibleDepartmentNamesOther"
                placeholder="请选择部门"
                clearable
                size="small"
                style="width: 120px;"
                @change="onChangeStripeType"
                @visible-change="getComplaintdepartmentList"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="{label:item.dictValue,value:item.dictKey}"
                  v-for="item in ComplaintdepartmentList"
                  :key="item.id"
                ></el-option>
              </el-select>
              <el-select
                ref="departmentErrorTypeRef1"
                v-model="Complaintform.departmentErrorType"
                filterable
                clearable
                placeholder="请选择失误类型"
                size="small"
                style="width: 140px;"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="(item,index) in departmentTypeList"
                  :key="index"
                  size="small"
                >
                  <!-- <span>{{item.dictValue}}</span> -->
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!-- <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker
                v-model="Launchdate3"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="right"
                size="small"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="handleFiltercomplaint(Launchdate3)"
                icon="el-icon-search"
                size="small"
              >查询</el-button>
              <el-button
                type="success"
                plain
                @click="handlAddcomplaint"
                icon="el-icon-plus"
                size="small"
              >添加</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="Complaint">
          <div class="Complaintmain" ref="Complaintmain">
            <div
              class="Complaint_list"
              v-for="(item,index) in ComplaintList"
              :key="index"
              @click="headleComplaintListDetils(item,index,'complaintListEdit')"
            >
              <img :src="checked" alt="" v-if="complaintindex == index" class="imgurl">
              <div class="credittype yb" v-if="item.complaintLevel=='1'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="credittype zd" v-if="item.complaintLevel=='2'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="credittype jj" v-if="item.complaintLevel=='3'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="credittype warning" v-if="item.complaintLevel=='4'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="order-num">
                <span>后台单号：{{item.xmbzNo}}</span>
                <i></i>
              </div>
              <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
              <div class="line">
                <p
                  v-for="(child,index) in item.orderDetailCakes"
                  :key="index"
                  style="display: block;"
                >
                  <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                  <span>{{child.goodsName}}~{{child.orderDetailId}}</span>
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>配送时间：</em>
                  {{item.deliveryStartTime}}~{{item.deliveryEndTime}}
                </p>
                <p v-if="item.handleState=='1'&&item.handleState=='4'">
                  <em>结案时间：</em>
                  {{item.endTime}}
                </p>
                <p>
                  <em>部门失误类型：</em>
                  {{item.responsibleDepartmentName}}~{{item.departmentErrorTypeName}}
                </p>
                <p style="display: flex;">
                  <em>投诉内容:</em>
                  <span
                    style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                  >{{item.complaintContent}}</span>
                </p>
                <p style="display: flex;">
                  <em>处理结果：</em>
                  <span
                    style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                  >{{item.processingResults}}</span>
                </p>
              </div>
              <div class="Complaint_lists">
                <div class="line">
                  <p>
                    <em>城市：</em>
                    {{item.cityName}}
                  </p>
                  <p>
                    <em>申请人：</em>
                    {{item.operator}}
                  </p>
                  <p>
                    <em>责任人：</em>
                    {{item.personLiable}}
                  </p>
                  <p>
                    <em>订单渠道：</em>
                    {{item.orderChannel}}
                  </p>
                  <p>
                    <em>投诉渠道 ：</em>
                    {{item.complaintChannelName}}
                  </p>
                </div>
                <div class="line">
                  <p>
                    <em>处理状态：</em>
                    {{item.handleStateName}}
                  </p>
                  <p>
                    <em>手机号：</em>
                    {{item.phone}}
                  </p>
                </div>
              </div>
            </div>
            <div class="refund_list" v-if="ComplaintList.length<=0">
              <p class="nodata">暂无数据</p>
            </div>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="Complaintform.page"
              :limit.sync="Complaintform.size"
              @pagination="getComplaintList"
            />
          </div>
          <div class="Complaint_con" v-if="complaindialogStatus=='update'">
            <el-form
              ref="complaintListEdit"
              :model="complaintListEdit"
              :rules="complaintListEditrules"
              label-width="100px"
            >
              <el-form-item label="后台单号">
                <span>{{complaintListEdit.xmbzNo}}</span>
              </el-form-item>
              <el-form-item label="配送时间">
                <span>{{complaintListEdit.deliveryStartTime}}~{{complaintListEdit.deliveryEndTime}}</span>
              </el-form-item>
              <el-form-item label="平台单号">
                <span v-if="complaintListEdit.platformNo">{{complaintListEdit.platformNo}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="创建工单时间">
                <span>{{complaintListEdit.createTime}}</span>
              </el-form-item>
              <el-form-item label="部门失误类型">
                <el-select
                  v-model="responsibleDepartmentNames"
                  placeholder="请选择部门"
                  size="small"
                  style="width: 120px;"
                  v-if="comStatus=='update'"
                  @visible-change="getComplaintdepartmentList"
                  @change="onChangeStripe"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="{label:item.dictValue,value:item.dictKey}"
                    v-for="item in ComplaintdepartmentList"
                    :key="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="resdepartmentErrorTypeNames"
                  filterable
                  placeholder="请选择失误类型"
                  size="small"
                  style="width: 140px;"
                  v-if="comStatus=='update'"
                  @change="onChangeStripeErrorType"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="{label:item.dictValue,value:item.dictKey}"
                    v-for="(item,index) in departmentTypeList"
                    :key="index"
                    size="small"
                  ></el-option>
                </el-select>
                <span
                  v-if="comStatus=='create'"
                >{{complaintListEdit.responsibleDepartmentName}}~{{complaintListEdit.departmentErrorTypeName}}</span>
              </el-form-item>
              <el-form-item label="投诉等级">
                <el-select
                  v-model="complaintListEdit.complaintLevel"
                  placeholder="请选择投诉等级"
                  v-if="comStatus=='update'"
                  size="small"
                >
                  <el-option
                    v-for="item in ComplaintLevelList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                    size="small"
                  ></el-option>
                </el-select>
                <span v-if="comStatus=='create'">{{complaintListEdit.complaintLevelName}}</span>
              </el-form-item>
              <el-form-item label="处理状态">
                <el-select
                  v-model="complaintListEdit.handleState"
                  placeholder="请选择处理状态"
                  v-if="comStatus=='update'"
                  size="small"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="item.dictKey"
                    v-for="(item,index) in dealstatusList"
                    :key="index"
                    size="small"
                  ></el-option>
                </el-select>
                <span v-if="comStatus=='create'">{{complaintListEdit.handleStateName}}</span>
              </el-form-item>
              <el-form-item label="投诉渠道">
                <el-select
                  v-model="complaintListEdit.complaintChannelName"
                  placeholder="请选择投诉等级"
                  v-if="comStatus=='update'"
                  size="small"
                >
                  <el-option
                    v-for="item in ComplaintChannelList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                    size="small"
                  ></el-option>
                </el-select>
                <span v-if="comStatus=='create'">{{complaintListEdit.complaintChannelName}}</span>
              </el-form-item>
              <el-form-item label="责任人" required>
                <el-input
                  v-model.trim="complaintListEdit.personLiable"
                  v-if="comStatus=='update'"
                  size="small"
                  class="inputType"
                  type="textarea"
                  maxlength="10"
                  show-word-limit
                ></el-input>
                <span v-if="comStatus=='create'">{{complaintListEdit.personLiable}}</span>
              </el-form-item>
              <el-form-item label="手机号码" required>
                <el-input
                  v-model.trim="complaintListEdit.phone"
                  onkeyup="value=value.replace(/[^\-?\d.]/g,'').slice(0,11)"
                  onafterpaste="value=value.replace(/[^\-?\d.]/g,'').slice(0,11)"
                  v-if="comStatus=='update'"
                  class="inputType"
                  size="small"
                ></el-input>
                <span v-if="comStatus=='create'">{{complaintListEdit.phone}}</span>
              </el-form-item>
              <el-form-item label="投诉内容 " required>
                <el-input
                  type="textarea"
                  v-model.trim="complaintListEdit.complaintContent"
                  v-if="comStatus=='update'"
                  maxlength="200"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows:6}"
                ></el-input>
                <p
                  v-if="comStatus=='create'"
                  class="processingResults"
                >{{complaintListEdit.complaintContent}}</p>
              </el-form-item>
              <el-form-item label="处理结果" required>
                <el-input
                  v-model.trim="complaintListEdit.processingResults"
                  v-if="comStatus=='update'"
                  type="textarea"
                  maxlength="50"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows:6}"
                ></el-input>
                <p
                  v-if="comStatus=='create'"
                  class="processingResults"
                >{{complaintListEdit.processingResults}}</p>
              </el-form-item>
              <div class="buttontips">
                <el-button
                  type="primary"
                  plain
                  @click="handlerEditcomplaint(complaintListEdit)"
                  size="small"
                  v-show="complaintShow"
                >编辑</el-button>
                <div class="rows" v-if="complaintOther">
                  <el-button
                    type="danger"
                    @click="handlerNotrefund(complaintListEdit)"
                    size="small"
                  >退款不退货</el-button>
                  <!-- v-if="!complaintListEdit.refundNotReturn" -->

                  <el-button
                    type="danger"
                    plain
                    @click="handlercomplaintRefund(complaintListEdit)"
                    size="small"
                  >申请退款</el-button>
                  <el-button
                    type="warning"
                    plain
                    @click="handlerProblemticket(complaintListEdit)"
                    size="small"
                  >转到问题工单</el-button>
                  <el-button
                    type="info"
                    size="small"
                    plain
                    @click="handlerLogcomplaint(complaintListEdit)"
                  >日志</el-button>
                </div>
              </div>
              <div class="buttontips" v-if="complaintEditShow">
                <el-button
                  type="success"
                  size="small"
                  plain
                  @click="handlerSavecomplaint(complaintListEdit,'complaintListEdit')"
                >保存</el-button>
                <el-button
                  type="warning"
                  plain
                  @click="handlercomplaintCancel(complaintListEdit,'complaintListEdit')"
                  size="small"
                >取消</el-button>
              </div>
            </el-form>
          </div>
          <div class="Complaint_con Nodata" v-else>请选择订单</div>
        </div>
      </div>
      <!-- 问题工单 -->
      <div v-if="indexs==3">
        <div class="filter_container">
          <el-form :inline="true" :model="problemTicket" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select
                v-model="deptNameproblemTicket"
                placeholder="请选择城市"
                size="small"
                style="width: 100px;"
                @change="handleCityproblemTicket"
                ref="deptNameRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="(house,citykey) in cityList"
                  :key="citykey"
                  :label="house.deptName"
                  :value="{value:house.id,label:house.deptName}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input
                v-model.trim="problemTicket.xmbzNo"
                size="small"
                style="width: 160px"
                @keyup.enter.native="handleFilterproblem(Launchdate4)"
                clearable
                placeholder="请输入后台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input
                v-model.trim="problemTicket.platformNo"
                size="small"
                style="width: 140px"
                @keyup.enter.native="handleFilterproblem(Launchdate4)"
                clearable
                placeholder="请输入平台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input
                v-model.trim="problemTicket.operator"
                size="small"
                style="width: 130px"
                @keyup.enter.native="handleFilterproblem(Launchdate4)"
                clearable
                placeholder="请输入申请人"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model.number="problemTicket.phone"
                size="small"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                maxlength="11"
                onafterpaste="value=value.replace(/[^\-?\d.]/g,'')"
                style="width: 140px"
                clearable
                @keyup.enter.native="handleFilterproblem(Launchdate4)"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="处理状态">
              <el-select
                v-model="problemTicket.handleState"
                clearable
                placeholder="请选择处理状态"
                size="small"
                style="width: 150px;"
                ref="handleStateRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="(item,index) in dealstatusList"
                  :key="index"
                  size="small"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门失误类型">
              <el-select
                v-model="responsibleDepartmentNamesOther"
                placeholder="请选择部门"
                clearable
                size="small"
                style="width: 120px;"
                @change="onChangeStripeType"
                @visible-change="getComplaintdepartmentList"
                ref="responsibleDepartmentRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="{label:item.dictValue,value:item.dictKey}"
                  v-for="item in ComplaintdepartmentList"
                  :key="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="problemTicket.departmentErrorType"
                filterable
                clearable
                placeholder="请选择失误类型"
                size="small"
                style="width: 140px;"
                ref="departmentErrorTypeRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="(item,index) in departmentTypeList"
                  :key="index"
                  size="small"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!-- <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker
                v-model="Launchdate4"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="right"
                size="small"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="handleFilterproblem(Launchdate4)"
                size="small"
                icon="el-icon-search"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="problemTicket">
          <div class="problemTicketmain" ref="problemTicketmain">
            <div
              class="problemTicket_list"
              v-for="(item,index) in problemTicketList"
              :key="index"
              @click="handlerProblem(item,index,'problemTicketEdit')"
            >
              <img :src="checked" alt="" v-if="problemTickindex == index" class="imgurl">
              <div class="credittype yb" v-if="item.complaintLevel=='1'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="credittype zd" v-if="item.complaintLevel=='2'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="credittype jj" v-if="item.complaintLevel=='3'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="credittype warning" v-if="item.complaintLevel=='4'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="order-num">
                <span>后台单号：{{item.xmbzNo}}</span>
                <i></i>
              </div>
              <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
              <div class="line">
                <p
                  v-for="(child,index) in item.orderDetailCakes"
                  :key="index"
                  style="display: block;"
                >
                  <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                  <span>{{child.goodsName}}~{{child.orderDetailId}}</span>
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p style="display: flex;">
                  <em>投诉内容:</em>
                  <span
                    style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                  >{{item.complaintContent}}</span>
                </p>
                <p style="display: flex;">
                  <em>处理结果：</em>
                  <span
                    style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                  >{{item.processingResults}}</span>
                </p>
              </div>
              <div class="Complaint_lists">
                <div class="line">
                  <p>
                    <em>城市：</em>
                    {{item.cityName}}
                  </p>
                  <p>
                    <em>申请人：</em>
                    {{item.operator}}
                  </p>
                  <p>
                    <em>责任人：</em>
                    {{item.personLiable}}
                  </p>
                  <p>
                    <em>订单渠道：</em>
                    {{item.orderChannel}}
                  </p>
                  <p>
                    <em>投诉渠道 ：</em>
                    {{item.complaintChannelName}}
                  </p>
                  <p>
                    <em>手机号：</em>
                    {{item.phone}}
                  </p>
                </div>
                <div class="line">
                  <p>
                    <em>部门失误类型：</em>
                    {{item.responsibleDepartmentName}}~{{item.departmentErrorTypeName}}
                  </p>
                  <p v-if="item.handleState=='1'&&item.handleState=='4'">
                    <em>结案时间：</em>
                    {{item.endTime}}
                  </p>
                  <p>
                    <em>处理状态：</em>
                    {{item.handleStateName}}
                  </p>
                  <!-- <p>
                    <em>蛋糕编码:</em>
                    {{item.orderDetailId}}
                  </p>-->
                </div>
                <div class="line"></div>
              </div>
            </div>
            <div class="refund_list" v-if="problemTicketList.length<=0">
              <p class="nodata">暂无数据</p>
            </div>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="problemTicket.page"
              :limit.sync="problemTicket.size"
              @pagination="getPrombleList"
            />
          </div>
          <div class="problemTicket_con" v-if="problemStatus=='update'">
            <el-form
              ref="problemTicketEdit"
              :model="problemTicketEdit"
              :rules="problemTicketEditrules"
              label-width="100px"
            >
              <el-form-item label="后台单号">
                <span v-if="problemTicketEdit.xmbzNo">{{problemTicketEdit.xmbzNo}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="创建工单时间">
                <span>{{problemTicketEdit.createTime}}</span>
              </el-form-item>
              <el-form-item label="平台单号">
                <span v-if="problemTicketEdit.platformNo">{{problemTicketEdit.platformNo}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="部门失误类型">
                <el-select
                  v-model="responsibleDepartmentNames"
                  placeholder="请选择部门"
                  size="small"
                  style="width: 120px;"
                  v-if="proStatus=='update'"
                  @visible-change="getComplaintdepartmentList"
                  @change="onChangeStripe"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="{label:item.dictValue,value:item.dictKey}"
                    v-for="item in ComplaintdepartmentList"
                    :key="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="resdepartmentErrorTypeNames"
                  filterable
                  placeholder="请选择失误类型"
                  size="small"
                  style="width: 140px;"
                  v-if="proStatus=='update'"
                  @change="onChangeStripeErrorType"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="{label:item.dictValue,value:item.dictKey}"
                    v-for="(item,index) in departmentTypeList"
                    :key="index"
                    size="small"
                  ></el-option>
                </el-select>
                <span
                  v-if="proStatus=='create'"
                >{{problemTicketEdit.responsibleDepartmentName}}~{{problemTicketEdit.departmentErrorTypeName}}</span>
              </el-form-item>
              <el-form-item label="投诉等级">
                <el-select
                  v-model="problemTicketEdit.complaintLevel"
                  placeholder="请选择投诉等级"
                  v-if="proStatus=='update'"
                  size="small"
                >
                  <el-option
                    v-for="item in ComplaintLevelList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                    size="small"
                  ></el-option>
                </el-select>
                <span v-if="proStatus=='create'">{{problemTicketEdit.complaintLevelName}}</span>
              </el-form-item>
              <el-form-item label="处理状态">
                <el-select
                  v-model="problemTicketEdit.handleState"
                  placeholder="请选择处理状态"
                  v-if="proStatus=='update'"
                  size="small"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="item.dictKey"
                    v-for="(item,index) in dealstatusList"
                    :key="index"
                    size="small"
                  ></el-option>
                </el-select>
                <span v-if="proStatus=='create'">{{problemTicketEdit.handleStateName}}</span>
              </el-form-item>
              <el-form-item label="投诉渠道">
                <el-select
                  v-model="problemTicketEdit.complaintChannelName"
                  placeholder="请选择投诉等级"
                  v-if="proStatus=='update'"
                  size="small"
                >
                  <el-option
                    v-for="item in ComplaintChannelList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                    size="small"
                  ></el-option>
                </el-select>
                <span v-if="proStatus=='create'">{{problemTicketEdit.complaintChannelName}}</span>
              </el-form-item>
              <el-form-item label="责任人" required>
                <el-input
                  v-model.trim="problemTicketEdit.personLiable"
                  v-if="proStatus=='update'"
                  size="small"
                  type="textarea"
                  maxlength="10"
                  show-word-limit
                ></el-input>
                <span v-if="proStatus=='create'">{{problemTicketEdit.personLiable}}</span>
              </el-form-item>
              <el-form-item label="手机号码" required>
                <el-input
                  v-model.trim="problemTicketEdit.phone"
                  v-if="proStatus=='update'"
                  class="inputType"
                  size="small"
                  onkeyup="value=value.replace(/[^\-?\d.]/g,'').slice(0,11)"
                  onafterpaste="value=value.replace(/[^\-?\d.]/g,'').slice(0,11)"
                ></el-input>
                <span v-if="proStatus=='create'">{{problemTicketEdit.phone}}</span>
              </el-form-item>
              <el-form-item label="投诉内容" required>
                <el-input
                  type="textarea"
                  v-model.trim="problemTicketEdit.complaintContent"
                  v-if="proStatus=='update'"
                  maxlength="200"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows:6}"
                ></el-input>
                <p
                  v-if="proStatus=='create'"
                  class="processingResults"
                >{{problemTicketEdit.complaintContent}}</p>
              </el-form-item>
              <el-form-item label="处理结果" required>
                <el-input
                  type="textarea"
                  v-model.trim="problemTicketEdit.processingResults"
                  v-if="proStatus=='update'"
                  maxlength="50"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows:6}"
                ></el-input>
                <p v-else class="processingResults">{{problemTicketEdit.processingResults}}</p>
              </el-form-item>
              <div class="buttontips">
                <el-button
                  type="primary"
                  plain
                  @click="handlerEditproblem(problemTicketEdit)"
                  size="small"
                  v-if="problemTicketShows"
                >编辑</el-button>
                <el-button
                  type="success"
                  size="small"
                  plain
                  v-if="problemTicketShowEdits"
                  @click="handlerSaveproblem(problemTicketEdit,'problemTicketEdit')"
                >保存</el-button>
                <el-button
                  type="warning"
                  plain
                  @click="handlerproblemCancel(problemTicketEdit,'problemTicketEdit')"
                  size="small"
                  v-if="problemTicketShowEdits"
                >取消</el-button>
                <el-button
                  type="info"
                  size="small"
                  plain
                  @click="handlerLogproblem(problemTicketEdit)"
                  v-show="problemTicketOther"
                >日志</el-button>
              </div>
            </el-form>
          </div>
          <div class="problemTicket_con Nodata" v-else>请选择订单</div>
        </div>
      </div>
      <!-- 异常工单 -->
      <div v-if="indexs==4">
        <div class="filter_container">
          <el-form :inline="true" :model="abnormalFrom" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select
                v-model="deptNameabnormal"
                placeholder="请选择城市"
                size="small"
                style="width: 100px;"
                @change="handleCityabnormal"
                ref="deptNameRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="(house,citykey) in cityList"
                  :key="citykey"
                  :label="house.deptName"
                  :value="{value:house.id,label:house.deptName}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input
                v-model.trim="abnormalFrom.xmbzNo"
                size="small"
                style="width: 160px"
                @keyup.enter.native="handleFilterabnormal(Launchdate5)"
                clearable
                placeholder="请输入后台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input
                v-model.trim="abnormalFrom.platformNo"
                size="small"
                style="width: 140px"
                @keyup.enter.native="handleFilterabnormal(Launchdate5)"
                clearable
                placeholder="请输入平台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input
                v-model.trim="abnormalFrom.operator"
                size="small"
                style="width: 130px"
                @keyup.enter.native="handleFilterabnormal(Launchdate5)"
                clearable
                placeholder="请输入申请人"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model.number="abnormalFrom.phone"
                size="small"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                maxlength="11"
                onafterpaste="value=value.replace(/[^\-?\d.]/g,'')"
                style="width: 140px"
                clearable
                @keyup.enter.native="handleFilterabnormal(Launchdate5)"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="处理状态">
              <el-select
                v-model="abnormalFrom.handleState"
                clearable
                placeholder="请选择处理状态"
                size="small"
                style="width: 150px;"
                ref="handleStateRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="(item,index) in dealstatusList"
                  :key="index"
                  size="small"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门失误类型">
              <el-select
                v-model="responsibleDepartmentNamesOther"
                placeholder="请选择部门"
                clearable
                size="small"
                style="width: 120px;"
                @change="onChangeStripeType"
                @visible-change="getComplaintdepartmentList"
                ref="responsibleDepartmentRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="{label:item.dictValue,value:item.dictKey}"
                  v-for="item in ComplaintdepartmentList"
                  :key="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="abnormalFrom.departmentErrorType"
                filterable
                clearable
                placeholder="请选择失误类型"
                size="small"
                style="width: 140px;"
                ref="departmentErrorTypeRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="(item,index) in departmentTypeList"
                  :key="index"
                  size="small"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!-- <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker
                v-model="Launchdate5"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="right"
              ></el-date-picker>
              <!-- <el-date-picker v-model="abnormalFrom.workOrderStartTime" type="datetime" size="small" placeholder="选择日期时间"
                style="width: 140px;margin-right:10px"></el-date-picker>
              <el-date-picker v-model="abnormalFrom.workOrderEndTime" type="datetime" size="small" placeholder="选择日期时间"
              style="width: 140px"></el-date-picker>-->
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="handleFilterabnormal(Launchdate5)"
                icon="el-icon-search"
                size="small"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="Complaint">
          <div class="Complaintmain" ref="abnormalFromMain">
            <div
              class="Complaint_list"
              v-for="(item,index) in abnormalList"
              :key="index"
              @click="headleAbnormaldetils(item,index,'abnormalEdit')"
            >
              <img :src="checked" alt="" v-if="abnormalIndex == index" class="imgurl">
              <div class="credittype yb" v-if="item.complaintLevel=='1'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="credittype zd" v-if="item.complaintLevel=='2'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="credittype jj" v-if="item.complaintLevel=='3'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="credittype warning" v-if="item.complaintLevel=='4'">
                <span class="tips">{{item.complaintLevelName}}</span>
              </div>
              <div class="order-num">
                <span>后台单号：{{item.xmbzNo}}</span>
                <i></i>
              </div>
              <span style="color: #FF0000;margin-right: 5px;">第{{item.count}}次异常</span>
              <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
              <div class="line">
                <p
                  v-for="(child,index) in item.orderDetailCakes"
                  :key="index"
                  style="display: block;"
                >
                  <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                  <span>{{child.goodsName}}~{{child.orderDetailId}}</span>
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
                <p>
                  <em>结案时间：</em>
                  {{item.endTime}}
                </p>
                <p>
                  <em>部门失误类型：</em>
                  {{item.responsibleDepartmentName}}~{{item.departmentErrorTypeName}}
                </p>
                <p style="display: flex;">
                  <em>投诉内容:</em>
                  <span
                    style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                  >{{item.abnormalContent}}</span>
                </p>
                <p style="display: flex;">
                  <em>处理结果：</em>
                  <span
                    style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                  >{{item.processingResults}}</span>
                </p>
              </div>
              <div class="Complaint_lists">
                <div class="line">
                  <p>
                    <em>城市：</em>
                    {{item.cityName}}
                  </p>
                  <p>
                    <em>申请人：</em>
                    {{item.operator}}
                  </p>
                  <p>
                    <em>责任人：</em>
                    {{item.personLiable}}
                  </p>
                  <p>
                    <em>订单渠道：</em>
                    {{item.orderChannel}}
                  </p>
                  <p>
                    <em>异常渠道 ：</em>
                    {{item.abnormalChannelName}}
                  </p>
                </div>
                <div class="line">
                  <p>
                    <em>创建工单时间：</em>
                    {{item.createTime}}
                  </p>
                  <p>
                    <em>处理状态：</em>
                    {{item.handleStateName}}
                  </p>
                  <p>
                    <em>手机号：</em>
                    {{item.phone}}
                  </p>
                </div>
                <div class="line"></div>
              </div>
            </div>
            <div class="refund_list" v-if="abnormalList.length<=0">
              <p class="nodata">暂无数据</p>
            </div>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="abnormalFrom.page"
              :limit.sync="abnormalFrom.size"
              @pagination="getabnormalList"
            />
          </div>
          <div class="abnormal_con" v-if="abnormalStatus=='update'">
            <el-form
              ref="abnormalEdit"
              :model="abnormalEdit"
              :rules="abnormalEditrules"
              label-width="100px"
            >
              <el-form-item label="后台单号">
                <span v-if="abnormalEdit.xmbzNo">{{abnormalEdit.xmbzNo}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="平台单号">
                <span v-if="abnormalEdit.platformNo">{{abnormalEdit.platformNo}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="创建工单时间">
                <span>{{abnormalEdit.createTime}}</span>
              </el-form-item>
              <el-form-item label="部门失误类型">
                <el-select
                  v-model="responsibleDepartmentNames"
                  placeholder="请选择部门"
                  size="small"
                  style="width: 120px;"
                  v-if="abnorStatus=='update'"
                  @visible-change="getComplaintdepartmentList"
                  @change="onChangeStripe"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="{label:item.dictValue,value:item.dictKey}"
                    v-for="item in ComplaintdepartmentList"
                    :key="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="resdepartmentErrorTypeNames"
                  filterable
                  placeholder="请选择失误类型"
                  size="small"
                  style="width: 140px;"
                  v-if="abnorStatus=='update'"
                  @change="onChangeStripeErrorType"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="{label:item.dictValue,value:item.dictKey}"
                    v-for="(item,index) in departmentTypeList"
                    :key="index"
                    size="small"
                  ></el-option>
                </el-select>
                <span
                  v-if="abnorStatus=='create'"
                >{{abnormalEdit.responsibleDepartmentName}}~{{abnormalEdit.departmentErrorTypeName}}</span>
              </el-form-item>
              <el-form-item label="投诉等级">
                <el-select
                  v-model="abnormalEdit.complaintLevel"
                  placeholder="请选择投诉等级"
                  v-if="abnorStatus=='update'"
                  size="small"
                >
                  <el-option
                    v-for="item in ComplaintLevelList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                    size="small"
                  ></el-option>
                </el-select>
                <span v-if="abnorStatus=='create'">{{abnormalEdit.complaintLevelName}}</span>
              </el-form-item>
              <el-form-item label="处理状态">
                <el-select
                  v-model="abnormalEdit.handleState"
                  placeholder="请选择处理状态"
                  v-if="abnorStatus=='update'"
                  size="small"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="item.dictKey"
                    v-for="(item,index) in dealstatusList"
                    :key="index"
                    size="small"
                  ></el-option>
                </el-select>
                <span v-if="abnorStatus=='create'">{{abnormalEdit.handleStateName}}</span>
              </el-form-item>
              <div class="lows">
                <el-form-item label="异常渠道">
                  <el-select
                    v-model="abnormalEdit.abnormalChannelName"
                    placeholder="请选择异常渠道"
                    v-if="abnorStatus=='update'"
                    size="small"
                  >
                    <el-option
                      v-for="item in abnormalChannelList"
                      :key="item.dictKey"
                      :label="item.dictValue"
                      :value="item.dictKey"
                      size="small"
                    ></el-option>
                  </el-select>
                  <span v-if="abnorStatus=='create'">{{abnormalEdit.abnormalChannelName}}</span>
                </el-form-item>
              </div>
              <el-form-item label="责任人" required>
                <el-input
                  v-model.trim="abnormalEdit.personLiable"
                  v-if="abnorStatus=='update'"
                  size="small"
                  class="inputType"
                ></el-input>
                <span v-if="abnorStatus=='create'">{{abnormalEdit.personLiable}}</span>
              </el-form-item>
              <el-form-item label="手机号码" required>
                <el-input
                  v-model.trim="abnormalEdit.phone"
                  v-if="abnorStatus=='update'"
                  class="inputType"
                  size="small"
                  onkeyup="value=value.replace(/[^\-?\d.]/g,'').slice(0,11)"
                  onafterpaste="value=value.replace(/[^\-?\d.]/g,'').slice(0,11)"
                ></el-input>
                <span v-if="abnorStatus=='create'">{{abnormalEdit.phone}}</span>
              </el-form-item>
              <el-form-item label="投诉内容" required>
                <el-input
                  type="textarea"
                  v-model.trim="abnormalEdit.abnormalContent"
                  v-if="abnorStatus=='update'"
                  maxlength="200"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows:6}"
                ></el-input>
                <p
                  v-if="abnorStatus=='create'"
                  class="processingResults"
                >{{abnormalEdit.abnormalContent}}</p>
              </el-form-item>
              <el-form-item label="处理结果" required>
                <el-input
                  type="textarea"
                  v-model.trim="abnormalEdit.processingResults"
                  v-if="abnorStatus=='update'"
                  maxlength="50"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows:6}"
                ></el-input>
                <p
                  v-if="abnorStatus=='create'"
                  class="processingResults"
                >{{abnormalEdit.processingResults}}</p>
              </el-form-item>
              <div class="buttontips">
                <el-button
                  type="primary"
                  plain
                  @click="handlerEditabnormal(abnormalEdit)"
                  size="small"
                  v-if="abnormalShow"
                >编辑</el-button>
                <el-button
                  type="success"
                  size="small"
                  plain
                  @click="handlerSaveabnormal(abnormalEdit,'abnormalEdit')"
                  v-if="abnormalEditShow"
                >保存</el-button>
                <el-button
                  type="warning"
                  plain
                  @click="handlerabnormalCancel(abnormalEdit,'abnormalEdit')"
                  size="small"
                  v-if="abnormalEditShow"
                >取消</el-button>
                <el-button
                  type="info"
                  size="small"
                  plain
                  @click="handlerLogabnormal(abnormalEdit)"
                  v-if="abnormalother"
                >日志</el-button>
                <el-button
                  type="danger"
                  size="small"
                  plain
                  @click="handlerabnormalnotrefund(abnormalEdit)"
                  v-if="abnormalother"
                >申请退款不退货</el-button>
                <el-button
                  type="danger"
                  size="small"
                  plain
                  @click="handlerabnormalrefund(abnormalEdit)"
                  v-if="abnormalother"
                >申请退款</el-button>
                <!-- v-if="!complaintListEdit.refundNotReturn" -->
              </div>
            </el-form>
          </div>
          <div class="abnormal_con Nodata" v-else>请选择订单</div>
        </div>
      </div>
      <!-- 退订工单-->
      <div v-if="indexs==5">
        <div class="filter_container">
          <el-form :inline="true" :model="unsubscribeform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select
                v-model="deptNameunsubscribe"
                placeholder="请选择城市"
                size="small"
                style="width: 100px;"
                @change="handleCityunsubscribe"
                ref="deptNameRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="(house,citykey) in cityList"
                  :key="citykey"
                  :label="house.deptName"
                  :value="{value:house.id,label:house.deptName}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input
                v-model.trim="unsubscribeform.xmbzNo"
                size="small"
                style="width: 160px"
                @keyup.enter.native="handleFifterunsubscribe(Launchdate6)"
                clearable
                placeholder="请输入后台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input
                v-model.trim="unsubscribeform.platformOrderId"
                size="small"
                style="width: 140px"
                @keyup.enter.native="handleFifterunsubscribe(Launchdate6)"
                clearable
                placeholder="请输入平台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input
                v-model.trim="unsubscribeform.operator"
                size="small"
                style="width: 140px"
                @keyup.enter.native="handleFifterunsubscribe(Launchdate6)"
                clearable
                placeholder="请输入申请人"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!--  <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker
                v-model="Launchdate6"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="right"
              ></el-date-picker>
              <!-- <el-date-picker v-model="unsubscribeform.workOrderStartTime" type="datetime" size="small" placeholder="请选择时间"
                style="width: 180px;margin-right:10px"></el-date-picker>
              <el-date-picker v-model="unsubscribeform.workOrderEndTime" type="datetime" size="small" placeholder="请选择时间"
              style="width: 180px"></el-date-picker>-->
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="handleFifterunsubscribe(Launchdate6)"
                icon="el-icon-search"
                size="small"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="work_list" v-for="item in unsubscribeList" :key="item.index">
          <!-- <p>订单号:{{item.bookerId}}</p> -->
          <div class="credittype" v-if="item.credittype==1">
            <span class="tips">{{item.tips}}</span>
          </div>
          <div class="order-num">
            <span>后台单号：{{item.xmbzNo}}</span>
            <i></i>
          </div>
          <div class="line">
            <p>
              <em>蛋糕名称及订单明细编码：</em>
              {{item.goodsName}}~ {{item.orderDetailId}}
            </p>
            <div v-if="item.suborderList&&item.suborderList.length>0">
              <p style="display: block;" v-for="(item,index) in item.suborderList" :key="index">
                <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                <span>
                  {{item.goodsName}}~{{item.orderDetailId}}
                  <em style="color:#ff0000">(子单)</em>
                </span>
              </p>
            </div>
            <p style="display: flex;">
              <em>申请原因：</em>
              <span
                style="width: 70%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
              >{{item.applyReason}}</span>
            </p>
          </div>
          <div class="work_lists">
            <div class="line">
              <p>
                <em>城市：</em>
                {{item.cityName}}
              </p>
              <p>
                <em>申请人：</em>
                {{item.operator}}
              </p>
              <p>
                <em>是否生产：</em>
                {{item.isProductionName}}
              </p>
              <p>
                <em>蛋糕去向：</em>
                {{item.cakeWhereaboutsName}}
              </p>
              <p>
                <em>创建工单时间：</em>
                {{item.createTime}}
              </p>
              <!-- <p>
                <em>蛋糕编码 ：</em>
                {{item.orderDetailId}}
              </p>-->
            </div>
            <div class="line">
              <p>
                <em>渠道：</em>
                {{item.channel}}
              </p>
              <p>
                <em>平台单号：</em>
                {{item.platformOrderId}}
              </p>
              <p>
                <em>退订原因：</em>
                {{item.unsubscribeReasonName}}
              </p>
            </div>
          </div>
        </div>
        <div class="work_list" v-if="unsubscribeList.length<=0">
          <p class="nodata">暂无数据</p>
        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="unsubscribeform.page"
          :limit.sync="unsubscribeform.size"
          @pagination="getunsubscribeList"
        />
      </div>
      <!-- 退款工单-->
      <div v-if="indexs==6">
        <div class="filter_container">
          <el-form :inline="true" :model="chargebackform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select
                v-model="deptNamechargeback"
                placeholder="请选择城市"
                size="small"
                style="width: 100px;"
                @change="handleCitychargeback"
                ref="deptNameRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="(house,citykey) in cityList"
                  :key="citykey"
                  :label="house.deptName"
                  :value="{value:house.id,label:house.deptName}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input
                v-model.trim="chargebackform.xmbzNo"
                size="small"
                style="width: 140px"
                clearable
                @keyup.enter.native="handleterFifterRefund(Launchdate7)"
                placeholder="请输入后台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input
                v-model.trim="chargebackform.platformNo"
                size="small"
                style="width: 140px"
                @keyup.enter.native="handleterFifterRefund(Launchdate7)"
                clearable
                placeholder="请输入平台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input
                v-model.trim="chargebackform.refundApplyPeople"
                size="small"
                style="width: 130px"
                @keyup.enter.native="handleterFifterRefund(Launchdate7)"
                clearable
                placeholder="请输入申请人"
              ></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select
                ref="approvalPassRef"
                v-model="chargebackform.approvalPass"
                clearable
                placeholder="请选择审核状态"
                size="small"
                style="width: 150px;"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="(item,index) in ApprovalStatus"
                  :key="index"
                  size="small"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!--  <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker
                v-model="Launchdate7"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="right"
              ></el-date-picker>
              <!-- <el-date-picker v-model="chargebackform.workOrderStartTime" type="datetime" size="small" placeholder="选择日期时间"
                style="width: 140px;margin-right:10px"></el-date-picker>
              <el-date-picker v-model="chargebackform.workOrderEndTime" type="datetime" size="small" placeholder="选择日期时间"
              style="width: 140px"></el-date-picker>-->
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="handleterFifterRefund(Launchdate7)"
                size="small"
                icon="el-icon-search"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- chargebackList -->
        <div class="refund">
          <div class="refundmain" ref="refundmain">
            <div
              class="refund_list"
              v-for="(item,index) in chargebackList"
              :key="index"
              @click="headleChargeback(item,index,'chargebackEdit')"
            >
              <img :src="checked" alt="" v-if="chargebackIndex == index" class="imgurl">
              <div class="credittype yb" v-if="item.refundGrade=='1'">
                <span class="tips">{{item.refundGradeName}}</span>
              </div>
              <div class="credittype zd" v-if="item.refundGrade=='2'">
                <span class="tips">{{item.refundGradeName}}</span>
              </div>
              <div class="credittype jj" v-if="item.refundGrade=='3'">
                <span class="tips">{{item.refundGradeName}}</span>
              </div>
              <div class="credittype warning" v-if="item.refundGrade=='4'">
                <span class="tips">{{item.refundGradeName}}</span>
              </div>
              <div class="order-num">
                <span>后台单号：{{item.xmbzNo}}</span>
                <i></i>
              </div>
              <em class="grade" style="margin-right: 5px;">{{item.approvalPassName }}</em>
              <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
              <div class="line">
                <p style="display: block;">
                  <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                  <span>{{item.goodsName}}~{{item.orderDetailId}}</span>
                </p>
                <div v-if="item.suborderList&&item.suborderList.length>0">
                  <p style="display: block;" v-for="(item,index) in item.suborderList" :key="index">
                    <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                    <span>
                      {{item.goodsName}}~{{item.orderDetailId}}
                      <em style="color:#ff0000">(子单)</em>
                    </span>
                  </p>
                </div>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
                <p style="display: flex;">
                  <em>审核不过原因：</em>
                  <span
                    style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                  >{{item.notPassReason}}</span>
                </p>
                <p>
                  <em>退款原因：</em>
                  {{item.refundReasonName}}
                </p>
                <p style="display: flex;">
                  <em>申请原因：</em>
                  <span
                    style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                  >{{item.applyReason}}</span>
                </p>
                <p>
                  <em>平台+门店：</em>
                  {{item.store}}
                </p>
                <!-- <p>
                  <em>结案时间：</em>
                  {{item.endTime}}
                </p>-->
              </div>
              <div class="refund_lists">
                <div class="line">
                  <p>
                    <em>城市：</em>
                    {{item.cityName}}
                  </p>
                  <p>
                    <em>申请人：</em>
                    {{item.refundApplyPeople}}
                  </p>
                  <p>
                    <em>是否生产：</em>
                    <span v-if="item.isProduction==1">是</span>
                    <span v-else>否</span>
                  </p>
                  <!-- <p>
                    <em>创建工单时间：</em>
                    {{item.remindersTime}}
                  </p>-->
                  <p>
                    <em>蛋糕去向：</em>
                    {{item.cakeWhereaboutsName}}
                  </p>
                  <p>
                    <em>退款等级：</em>
                    {{item.refundGradeName}}
                  </p>
                  <!-- <p v-if='item.refundMode==1'> -->

                  <!-- </p> -->
                  <!-- <div v-if='item.refundMode==2'> -->

                  <!-- <p>
                      <em>赔偿总金额</em>
                      {{item.refundMoney/100}}
                  </p>-->
                  <!-- </div> -->
                </div>
                <div class="line">
                  <p>
                    <em>渠道类别：</em>
                    {{item.channelTypeName}}
                  </p>
                  <p>
                    <em>渠道：</em>
                    {{item.channelName}}
                  </p>
                  <p>
                    <em>退款类型：</em>
                    {{item.refundTypeName}}
                  </p>
                  <p>
                    <em>审核状态：</em>
                    <span>{{item.approvalPassName}}</span>
                  </p>
                  <p>
                    <em>退款来源：</em>
                    {{item.refundSourceName}}
                  </p>
                  <!-- <p>
                    <em>蛋糕编码 ：</em>
                    {{item.orderDetailId}}
                  </p>-->
                </div>
                <div class="line">
                  <!-- <p>
                    <em>退款方式：</em>
                    <span>
                      {{item.refundModeName}}
                    </span>
                  </p>-->
                  <!-- <p>
                    <em>退款二维码：</em>
                    <img :src="item.refundCode" alt="" class="refundCode">
                  </p>-->
                  <p>
                    <em>退款金额：</em>
                    {{item.refundMoney}}
                  </p>
                  <p>
                    <em>蛋糕营销金额:</em>
                    {{item.goodsPrice/100}}
                  </p>
                  <p>
                    <em>赔偿金额:</em>
                    {{item.cakeCompensatePrice}}
                  </p>
                  <p>
                    <em>诚意金：</em>
                    {{item.sincerityGold}}
                  </p>
                  <p>
                    <em>赠送蛋糕金额：</em>
                    {{item.giveCakePrice}}
                  </p>
                  <p>
                    <em>赠送礼品金额：</em>
                    {{item.giveGiftPrice}}
                  </p>
                </div>
              </div>
            </div>
            <div class="work_list" v-if="chargebackList.length<=0">
              <p class="nodata">暂无数据</p>
            </div>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="chargebackform.page"
              :limit.sync="chargebackform.size"
              @pagination="getabchargebackList"
            />
          </div>
          <div class="refund_con" v-if="chargebackStatus=='update'">
            <el-form
              ref="chargebackEdit"
              :model="chargebackEdit"
              :rules="chargebackEditrules"
              label-width="100px"
            >
              <el-form-item label="后台单号">
                <span>{{chargebackEdit.xmbzNo}}</span>
              </el-form-item>
              <el-form-item label="渠道类别">
                <span v-if="chargebackEdit.channelTypeName">{{chargebackEdit.channelTypeName}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="渠道">
                <span v-if="chargebackEdit.channelName">{{chargebackEdit.channelName}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="是否生产">
                <span v-if="chargebackEdit.isProduction==1">是</span>
                <span v-else>否</span>
              </el-form-item>
              <el-form-item label="退款等级">
                <el-select
                  v-model="chargebackEdit.refundGrade"
                  v-if="Editrefund=='update'"
                  size="small"
                  placeholder="请选择退款等级"
                  @change="handlerefundGrade"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="item.dictKey"
                    v-for="(item,index) in GradeList"
                    :key="index"
                  ></el-option>
                </el-select>
                <span v-if="Editrefund=='create'">{{chargebackEdit.refundGradeName}}</span>
              </el-form-item>
              <el-form-item label="退款原因">
                <el-select
                  v-model="refundReasonNames"
                  v-if="Editrefund=='update'"
                  size="small"
                  placeholder="请选择退款原因"
                  @visible-change="refundReasonList"
                  @change="handlerefundReason"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="{label:item.dictValue,value:item.dictKey}"
                    v-for="(item,index) in ReasonList"
                    :key="index"
                  ></el-option>
                </el-select>
                <span v-if="Editrefund=='create'">{{chargebackEdit.refundReasonName}}</span>
              </el-form-item>
              <div class="lows">
                <el-form-item label="退款类型">
                  <el-select
                    v-model="refundTypeNames"
                    v-if="Editrefund=='update'"
                    size="small"
                    placeholder="请选择退款类型"
                  >
                    <el-option
                      :label="item.dictValue"
                      :value="{label:item.dictValue,value:item.dictKey}"
                      v-for="(item,index) in RefundTypeList"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <span v-if="Editrefund=='create'">{{chargebackEdit.refundTypeName}}</span>
                </el-form-item>
              </div>
              <el-form-item label="申请原因" required>
                <el-input
                  v-model.trim="chargebackEdit.applyReason"
                  type="textarea"
                  style="width:200px"
                  v-if="Editrefund=='update'"
                  size="small"
                  maxlength="50"
                  show-word-limit
                  :autosize="{ minRows: 4, maxRows:6}"
                ></el-input>
                <p
                  v-if="Editrefund=='create'"
                  class="processingResults"
                >{{chargebackEdit.applyReason}}</p>
              </el-form-item>
              <el-form-item label="审核状态">
                <el-select
                  v-model="chargebackShow.approvalPass"
                  placeholder="请选择审核状态"
                  v-if="Editrefund=='update'"
                  size="small"
                >
                  <el-option
                    :label="item.dictValue"
                    :value="item.dictKey"
                    v-for="(item,index) in ApprovalStatus"
                    :key="index"
                    size="small"
                  ></el-option>
                </el-select>
                <span v-if="Editrefund=='create'">{{chargebackEdit.approvalPassName}}</span>
              </el-form-item>
              <!-- <el-form-item label="退款方式">
                <span v-if="Editrefund=='create'">{{chargebackEdit.refundModeName}}</span>
                <el-radio-group v-model="chargebackEdit.refundMode" v-else>
                  <el-radio v-for="(item,index) in RefundModeList" :key="index" :label="item.dictKey">
                    {{ item.dictValue }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>-->

              <el-form-item label="退款金额：" required>
                <el-input
                  v-if="Editrefund=='update'"
                  v-model.trim="chargebackEdit.refundMoney"
                  class="inputType"
                  size="small"
                  style="width:200px"
                  onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                  onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
                ></el-input>
                <span v-if="Editrefund=='create'">{{chargebackEdit.refundMoney}}</span>
              </el-form-item>
              <div v-if="Editrefund=='update'">
                <el-radio-group
                  v-model="chargebackEdit.compensationMethod"
                  style="padding-left: 40px;"
                >
                  <el-radio
                    :label="item.dictKey"
                    :key="item.dictKey"
                    v-for="item in compensationList"
                    @change="headlecompensationMethod(item.dictKey,chargebackEdit.goodsPrice/100)"
                  >
                    <span>{{item.dictValue}}</span>
                  </el-radio>
                </el-radio-group>
                <div class="compensationMethod">
                  <el-form-item label="赔偿金额" label-width="80px">
                    <span v-if="Editrefund=='update'">
                      <span>
                        <el-input
                          v-model.trim="cakeCompensatePrice"
                          class="inputType"
                          size="small"
                          style="width:100px"
                          onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                          onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
                        ></el-input>
                      </span>
                    </span>
                    <span
                      v-if="Editrefund=='create'"
                    >{{chargebackEdit.cakeCompensatePrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
                  </el-form-item>
                  <el-form-item label="诚意金" label-width="80px">
                    <span v-if="Editrefund=='update'">
                      <el-input
                        v-model.trim="chargebackEdit.sincerityGold"
                        class="inputType"
                        size="small"
                        style="width:100px"
                        onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                        onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
                      ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
                    </span>
                    <span
                      v-if="Editrefund=='create'"
                    >{{chargebackEdit.sincerityGold||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
                  </el-form-item>
                  <el-form-item label="赠送蛋糕" label-width="80px">
                    <span v-if="Editrefund=='update'">
                      <el-input
                        v-model.trim="chargebackEdit.giveCakePrice"
                        class="inputType"
                        size="small"
                        style="width:100px"
                        onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                        onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
                      ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
                    </span>
                    <span
                      v-if="Editrefund=='create'"
                    >{{chargebackEdit.giveCakePrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
                  </el-form-item>
                  <el-form-item label="赠送礼品" label-width="80px">
                    <span v-if="Editrefund=='update'">
                      <el-input
                        v-model.trim="chargebackEdit.giveGiftPrice"
                        class="inputType"
                        size="small"
                        style="width:100px"
                        onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                        onafterpaste="value=value.replace/[^\-?\d.]/g,'')"
                      ></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
                    </span>
                    <span
                      v-if="Editrefund=='create'"
                    >{{chargebackEdit.giveGiftPrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="门店" required>
                <el-input
                  v-model.trim="chargebackEdit.store"
                  size="small"
                  type="textarea"
                  style="width:200px"
                  maxlength="30"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows:4}"
                  v-if="Editrefund=='update'"
                ></el-input>
                <p v-if="Editrefund=='create'" class="processingResults">{{chargebackEdit.store}}</p>
              </el-form-item>
              <el-form-item label="退款二维码" v-if="Editrefund=='update'">
                <el-upload
                  class="avatar-uploader"
                  action="/api/xmbz-goods/file/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :data="{tag:'refund'}"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="chargebackEdit.refundCode"
                    :src="chargebackEdit.refundCode"
                    class="avatar"
                  >
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="退款二维码" v-if="Editrefund=='create'">
                <img
                  :src="chargebackEdit.refundCode"
                  class="avatar"
                  v-if="chargebackEdit.refundCode"
                  @click="handlePictureCardPreview(chargebackEdit.refundCode)"
                >
                <img :src="chargebackEdit.refundCode" class="avatar" v-else>
              </el-form-item>
              <div class="buttontips">
                <el-button
                  type="success"
                  size="small"
                  plain
                  @click="handlerSaverefund(chargebackEdit,'chargebackEdit')"
                  v-if="RequetrefundShowsEdit"
                >保存</el-button>
                <el-button
                  type="warning"
                  size="small"
                  plain
                  @click="handlerefundCancel(chargebackEdit,'chargebackEdit')"
                  v-if="RequetrefundShowsEdit"
                >取消</el-button>
              </div>
              <div class="buttontips">
                <el-button
                  type="primary"
                  size="small"
                  plain
                  @click="handlerEditrefund(chargebackEdit)"
                  v-if="RequetrefundShows"
                >编辑</el-button>
                <el-button
                  type="info"
                  size="small"
                  plain
                  @click="handlerLogrefund(chargebackEdit)"
                  v-if="chargebackEditotherShow"
                >日志</el-button>
                <el-button
                  type="danger"
                  size="small"
                  plain
                  @click="handlerRequetrefund(chargebackEdit)"
                  v-show="chargebackEditotherShow"
                  v-if="chargebackEdit.approvalPass=='1'||chargebackEdit.approvalPass=='4'"
                >申请退款</el-button>
                <el-button
                  type="success"
                  size="small"
                  plain
                  @click="handlerApproved(chargebackEdit)"
                  v-show="chargebackEditotherShow"
                  v-if="chargebackEdit.approvalPass=='3'"
                >审批通过</el-button>
                <el-button
                  type="info"
                  size="small"
                  plain
                  @click="handlerNotapproved(chargebackEdit)"
                  v-show="chargebackEditotherShow"
                  v-if="chargebackEdit.approvalPass=='3'"
                >审批不通过</el-button>
              </div>
            </el-form>
          </div>
          <div class="refund_con Nodata" v-else>请选择订单</div>
        </div>
      </div>
      <!-- 报损工单查询 -->
      <div v-if="indexs==7">
        <div class="filter_container">
          <el-form :inline="true" :model="Lossreportform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select
                v-model="deptNameLossreport"
                placeholder="请选择城市"
                size="small"
                style="width: 100px;"
                @change="handleCityLossreport"
                ref="deptNameRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="(house,citykey) in cityList"
                  :key="citykey"
                  :label="house.deptName"
                  :value="{value:house.id,label:house.deptName}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input
                v-model.trim="Lossreportform.xmbzNo"
                size="small"
                style="width: 160px"
                @keyup.enter.native="handleFifterDamaged(Launchdate8)"
                clearable
                placeholder="请输入后台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input
                v-model.trim="Lossreportform.platformOrderId"
                size="small"
                style="width: 140px"
                @keyup.enter.native="handleFifterDamaged(Launchdate8)"
                clearable
                placeholder="请输入平台单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input
                v-model.trim="Lossreportform.operator"
                size="small"
                style="width: 130px"
                @keyup.enter.native="handleFifterDamaged(Launchdate8)"
                clearable
                placeholder="请输入申请人"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!-- <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker
                v-model="Launchdate8"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="right"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="handleFifterDamaged(Launchdate8)"
                icon="el-icon-search"
                size="small"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="work_list" v-for="item in  Lossreport" :key="item.index">
          <div class="credittype" v-if="item.credittype==1">
            <span class="tips">{{item.tips}}</span>
          </div>
          <div class="order-num">
            <span>后台单号：{{item.xmbzNo}}</span>
            <i></i>
          </div>
          <div class="line">
            <p>
              <em>蛋糕名称及订单明细编码：</em>
              {{item.goodsName}}~ {{item.orderDetailId}}
            </p>
            <p>
              <em>创建工单时间：</em>
              {{item.createTime}}
            </p>
            <p style="display: flex;">
              <em>报损原因：</em>
              <span
                style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
              >{{item.lossReasonName}}</span>
            </p>
          </div>
          <div class="work_lists">
            <div class="line">
              <p>
                <em>城市：</em>
                {{item.cityName}}
              </p>
              <p>
                <em>申请人：</em>
                {{item.operator}}
              </p>
              <p>
                <em>是否生产：</em>
                {{item.isProductionName}}
              </p>
              <p>
                <em>蛋糕去向：</em>
                {{item.cakeWhereaboutsName}}
              </p>
            </div>
            <div class="line">
              <p>
                <em>渠道：</em>
                {{item.channel}}
              </p>
              <p>
                <em>平台单号：</em>
                {{item.platformOrderId}}
              </p>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <div class="work_list" v-if="Lossreport.length<=0">
          <p class="nodata">暂无数据</p>
        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="Lossreportform.page"
          :limit.sync="Lossreportform.size"
          @pagination="getLossreport"
        />
      </div>
      <!-- 工单查询-->
      <div v-if="indexs==8">
        <div class="filter_container">
          <el-form :inline="true" :model="workorderform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select
                v-model="deptNameworkorder"
                placeholder="请选择城市"
                size="small"
                style="width: 100px;"
                @change="handleCityworkorder"
                ref="deptNameRef"
                @keydown.native="selectBlur($event)"
              >
                <el-option
                  v-for="(house,citykey) in cityList"
                  :key="citykey"
                  :label="house.deptName"
                  :value="{value:house.id,label:house.deptName}"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input
                v-model.trim="workorderform.xmbzNo"
                size="small"
                clearable
                placeholder="请输入后台单号"
                @keyup.enter.native="handleFilterwork(Launchdate9)"
              ></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input
                v-model.trim="workorderform.platformNo"
                size="small"
                placeholder="请输入平台单号"
                clearable
                @keyup.enter.native="handleFilterwork(Launchdate9)"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model.number="workorderform.phone"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                maxlength="11"
                onafterpaste="value=value.replace(/[^\-?\d.]/g,'')"
                size="small"
                clearable
                placeholder="请输入手机号码"
                @keyup.enter.native="handleFilterwork(Launchdate9)"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!-- <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker
                v-model="Launchdate9"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :clearable="false"
                align="right"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="handleFilterwork(Launchdate9)"
                size="small"
                icon="el-icon-search"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="worklist" v-for="item in workorderlist" :key="item.index">
          <!-- 催单 -->
          <div class="work_list" v-if="item.workOrderType=='催单'">
            <div class="order-num">
              <span>后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="work_lists">
              <div class="line">
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>配送时间：</em>
                  {{item.deliveryTime}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>配送员：</em>
                  {{item.delivery}}
                </p>
                <p>
                  <em>渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>催单类型：</em>
                  <span v-if="item.reminderType==1">配送时间前催单</span>
                  <span v-if="item.reminderType==2">配送时间内催单</span>
                  <span v-if="item.reminderType==3">超时催单</span>
                </p>
              </div>
              <div class="line">
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>分仓：</em>
                  {{item.warehouse}}
                </p>
              </div>
            </div>
            <div class="work_lists">
              <div class="line">
                <p>
                  <em>催单内容：</em>
                  {{item.reminderContent}}
                </p>
              </div>
            </div>
          </div>
          <!-- 备款工单 -->
          <div class="work_list" v-if="item.workOrderType=='备款'">
            <div class="order-num">
              <span>后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em class="grade">{{item.provisionsStatusName}}</em>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p>
                <em>蛋糕名称及订单明细编码：</em>
                {{item.goodsName}}~{{item.orderDetailId}}
              </p>
              <p style="display: flex;">
                <em>备款内容：</em>
                <span
                  style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                >{{item.provisionsContent}}</span>
              </p>
            </div>
            <div class="work_lists" style="padding:0 10px">
              <div class="line">
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>蛋糕去向：</em>
                  {{item.cakeWhereaboutsName}}
                </p>
                <p>
                  <em>责任部门：</em>
                  {{item.personDept}}
                </p>
                <p v-if="item.provisionsStatusName=='已抵用'" class="red">
                  <em>抵用单号：</em>
                  <span>{{item.offsetNo}}</span>
                </p>
                <p v-if="item.provisionsStatusName=='已抵用'">
                  <em>抵用时间：</em>
                  <span>{{item.offsetTime}}</span>
                </p>
              </div>
              <div class="line">
                <p>
                  <em>责任人：</em>
                  {{item.personLiable}}
                </p>
                <p>
                  <em>分仓：</em>
                  {{item.branchWarehouse}}
                </p>
              </div>
              <div class="line"></div>
            </div>
          </div>
          <!-- 投诉 -->
          <div class="work_list" v-if="item.workOrderType=='投诉'">
            <div class="order-num">
              <span>后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em class="grade" v-if="item.handleStateName">{{item.complaintLevelName}}</em>
            <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p
                v-for="(child,index) in item.orderDetailCakes"
                :key="index"
                style="display: block;"
              >
                <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                <span>{{child.goodsName}}~{{child.orderDetailId}}</span>
              </p>
              <p style="display: flex;">
                <em>投诉内容:</em>
                <span
                  style="width: 80%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                >{{item.complaintContent}}</span>
              </p>
              <p style="display: flex;">
                <em>处理结果：</em>
                <span
                  style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                >{{item.processingResults}}</span>
              </p>
            </div>
            <div class="work_lists" style="padding:0 10px">
              <div class="line">
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>责任人：</em>
                  {{item.personLiable}}
                </p>
                <p>
                  <em>订单渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>投诉渠道 ：</em>
                  {{item.complaintChannelName}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>部门失误类型：</em>
                  {{item.responsibleDepartmentName}}~{{item.departmentErrorTypeName}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>处理状态：</em>
                  {{item.handleStateName}}
                </p>
                <!--  <p>
                  <em>赔偿方式：</em>
                  <span>
                    <span v-for="child in item.compensationMethod" :key="child.id">
                      <span v-if="child==1">免单;</span>
                      <span v-if="child==2">免半单;</span>
                      <span v-if="child==3">诚意金;</span>
                      <span v-if="child==4">赠送蛋糕;</span>
                      <span v-if="child==5">赠品礼品;</span>
                      <span v-if="child==6">无赔偿;</span>
                    </span>
                  </span>
                </p>-->
              </div>
              <div class="line">
                <p>
                  <em>手机号：</em>
                  {{item.phone}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
                <p>
                  <em>结案时间：</em>
                  {{item.endTime}}
                </p>
                <!--   <p>
                  <em>退款金额：</em>
                  {{item.refundAmount}}
                </p>
                <p>
                  <em>赔偿金：</em>
                  {{item.damages}}
                </p>-->
              </div>
            </div>
          </div>
          <!-- 问题 -->
          <div class="work_list" v-if="item.workOrderType=='问题'">
            <div class="order-num">
              <span>后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em class="grade" v-if="item.handleStateName">{{item.handleStateName}}</em>
            <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p
                v-for="(child,index) in item.orderDetailCakes"
                :key="index"
                style="display: block;"
              >
                <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                <span>{{child.goodsName}}~{{child.orderDetailId}}</span>
              </p>
              <p style="display: flex;">
                <em>投诉内容:</em>
                <span
                  style="width: 80%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                >{{item.complaintContent}}</span>
              </p>
              <p style="display: flex;">
                <em>处理结果:</em>
                <span
                  style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                >{{item.processingResults}}</span>
              </p>
            </div>
            <div class="work_lists" style="padding:0 10px">
              <div class="line">
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>责任人：</em>
                  {{item.personLiable}}
                </p>
                <p>
                  <em>订单渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>投诉渠道 ：</em>
                  {{item.complaintChannelName}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>部门失误类型：</em>
                  {{item.responsibleDepartmentName}}~{{item.departmentErrorTypeName}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>处理状态：</em>
                  {{item.handleStateName}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>手机号：</em>
                  {{item.phone}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
                <p v-if="item.handleState==2">
                  <em>结案时间：</em>
                  {{item.endTime}}
                </p>
                <p v-if="item.handleState==3">
                  <em>结案时间：</em>
                  {{item.endTime}}
                </p>
              </div>
            </div>
          </div>
          <!-- 异常 -->
          <div class="work_list" v-if="item.workOrderType=='异常'">
            <div class="order-num">
              <span>后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em class="grade" v-if="item.complaintLevelName">{{item.complaintLevelName}}</em>
            <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p
                v-for="(child,index) in item.orderDetailCakes"
                :key="index"
                style="display: block;"
              >
                <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                <span>{{child.goodsName}}~{{child.orderDetailId}}</span>
              </p>
              <p style="display: flex;">
                <em>投诉内容:</em>
                <span
                  style="width: 80%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                >{{item.abnormalContent}}</span>
              </p>
              <p style="display: flex;">
                <em>处理结果：</em>
                <span
                  style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                >{{item.processingResults}}</span>
              </p>
            </div>
            <div class="work_lists" style="padding:0 10px">
              <div class="line">
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>责任人：</em>
                  {{item.personLiable}}
                </p>
                <p>
                  <em>订单渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>异常渠道 ：</em>
                  {{item.abnormalChannelName}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>部门失误类型：</em>
                  {{item.responsibleDepartmentName}}~{{item.departmentErrorTypeName}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>处理状态：</em>
                  {{item.handleStateName}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>手机号：</em>
                  {{item.phone}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
              </div>
            </div>
          </div>
          <!-- 退款 -->
          <div class="work_list" v-if="item.workOrderType=='退款'">
            <div class="order-num">
              <span>后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em
              class="grade"
              v-if="item.complaintLevelName"
              style="margin-right: 1px;"
            >{{item.complaintLevelName}}</em>
            <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p>
                <em>蛋糕名称及订单明细编码：</em>
                {{item.goodsName}}
              </p>
              <p>
                <em>创建工单时间：</em>
                {{item.createTime}}
              </p>
              <p>
                <em>平台单号：</em>
                {{item.platformNo}}
              </p>
              <p style="display: flex;">
                <em>申请原因：</em>
                <span
                  style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                >{{item.applyReason}}</span>
              </p>
            </div>
            <div class="work_lists" style="padding:0 10px;">
              <div class="line">
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人:</em>
                  {{item.refundApplyPeople}}
                </p>
                <p>
                  <em>是否生产:</em>
                  {{item.isProductionName}}
                </p>
                <p>
                  <em>蛋糕去向:</em>
                  {{item.cakeWhereaboutsName}}
                </p>
                <p v-if="item.refundMode==1">
                  <em>退款金额：</em>
                  {{item.refundMoney}}
                </p>
                <div v-if="item.refundMode==2">
                  <p>
                    <em>蛋糕营销金额:</em>
                    {{item.goodsPrice/100}}
                  </p>
                  <p>
                    <em>蛋糕金额:</em>
                    {{item.cakeCompensatePrice}}
                  </p>
                  <p>
                    <em>诚意金：</em>
                    {{item.sincerityGold}}
                  </p>
                  <p>
                    <em>赠送蛋糕金额：</em>
                    {{item.giveCakePrice}}
                  </p>
                  <p>
                    <em>赠送礼品金额：</em>
                    {{item.giveGiftPrice}}
                  </p>
                  <p>
                    <em>赔偿总金额</em>
                    {{item.refundMoney/100}}
                  </p>
                </div>
                <p>
                  <em>退款来源：</em>
                  {{item.refundSourceName}}
                </p>
                <p>
                  <em>审核状态：</em>
                  <span>{{item.approvalPassName}}</span>
                </p>
              </div>
              <div class="line">
                <p>
                  <em>渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>退款原因：</em>
                  {{item.refundReasonName}}
                </p>
                <p>
                  <em>退款类型：</em>
                  {{item.whetherRefundName}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>退款方式：</em>
                  <span>{{item.refundModeName}}</span>
                </p>
                <p>
                  <em>平台+门店：</em>
                  {{item.store}}
                </p>
                <p>
                  <em>退款等级：</em>
                  {{item.refundGradeName}}
                </p>
              </div>
            </div>
          </div>
          <!-- 退定 -->
          <div class="work_list" v-if="item.workOrderType=='退订'">
            <div class="order-num">
              <span>后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p>
                <em>蛋糕名称及订单明细编码:</em>
                {{item.goodsName}}~{{item.orderDetailId}}
              </p>
              <p style="display: flex;">
                <em>申请原因:</em>
                <span
                  style="width: 80%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;"
                >{{item.applyReason}}</span>
              </p>
            </div>
            <div class="work_lists" style="padding:0 10px">
              <div class="line">
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人:</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>是否生产:</em>
                  {{item.isProductionName}}
                </p>
                <p>
                  <em>蛋糕去向:</em>
                  {{item.cakeWhereaboutsName}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformOrderId}}
                </p>
                <p>
                  <em>退订原因：</em>
                  {{item.unsubscribeReasonName}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>创建工单时间:</em>
                  {{item.createTime}}
                </p>
              </div>
            </div>
          </div>
          <!-- 报损 -->
          <div class="work_list" v-if="item.workOrderType=='报损'">
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="order-num">
              <span>后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <div class="line">
              <p>
                <em>蛋糕名称及订单明细编码:</em>
                {{item.goodsName}}~ {{item.orderDetailId}}
              </p>
              <p>
                <em>创建工单时间:</em>
                {{item.createTime}}
              </p>
            </div>
            <div class="work_lists" style="padding:0 10px">
              <div class="line">
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人:</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>是否生产:</em>
                  {{item.isProductionName}}
                </p>
                <p>
                  <em>蛋糕去向:</em>
                  {{item.cakeWhereaboutsName}}
                </p>
              </div>
              <div class="line">
                <p>
                  <em>渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformOrderId}}
                </p>
                <p>
                  <em>报损原因：</em>
                  {{item.lossReasonName}}
                </p>
              </div>
              <div class="line"></div>
            </div>
          </div>
        </div>
        <div class="work_list" v-if="workorderlist.length<=0">
          <p class="nodata">暂无数据</p>
        </div>
        <!-- <pagination
          v-show="total>0"
          :total="total"
          :page.sync="workorderform.page"
          :limit.sync="workorderform.size"
          @pagination="getOrderList"
        />-->
      </div>
    </div>
    <!-- 添加投诉 -->
    <el-dialog
      title="添加投诉"
      :visible.sync="ComplaintVisible"
      width="35%"
      class="complainmain"
      :show-close="false"
    >
      <el-form
        ref="complaintAdd"
        :model="complaintAdd"
        label-width="130px"
        class="complaint_main"
        :rules="refundrules"
      >
        <el-form-item label="后台单号" prop="xmbzNo">
          <el-input
            v-model.trim="complaintAdd.xmbzNo"
            size="small"
            style="width:200px"
            maxlength="30"
            onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"
            onafterpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"
          ></el-input>
        </el-form-item>
        <el-form-item label="平台单号" prop="platformNo">
          <el-input
            v-model.trim="complaintAdd.platformNo"
            maxlength="30"
            style="width:200px"
            size="small"
            onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"
            onafterpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门失误类型">
          <el-select
            v-model="responsibleDepartmentNames"
            placeholder="请选择部门"
            size="small"
            style="width: 120px;"
            @change="onChangeStripe"
            @visible-change="getComplaintdepartmentList"
          >
            <el-option
              :label="item.dictValue"
              :value="{label:item.dictValue,value:item.dictKey}"
              v-for="item in ComplaintdepartmentList"
              :key="item.id"
            ></el-option>
          </el-select>
          <el-select
            v-model="complaintAdd.departmentErrorType"
            placeholder="请选择失误类型"
            size="small"
            style="width: 140px;"
            prop="departmentErrorType"
            @change="onChangeStripeErrorType"
          >
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="(item,index) in departmentTypeList"
              :key="index"
              size="small"
            >{{item.dictValue}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投诉等级" prop="complaintLevel">
          <el-select
            v-model="complaintAdd.complaintLevel"
            placeholder="请选择投诉等级"
            size="small"
            style="width: 150px;margin-right:10px"
          >
            <el-option
              v-for="item in ComplaintLevelList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
              size="small"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投诉渠道" prop="complaintChannel">
          <el-select
            v-model="complaintAdd.complaintChannel"
            placeholder="请选择投诉渠道"
            size="small"
            style="width: 150px;margin-right:10px"
          >
            <el-option
              v-for="item in ComplaintChannelList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
              size="small"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="责任人" prop="personLiable">
          <el-input v-model.trim="complaintAdd.personLiable" size="small" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model.trim="complaintAdd.phone"
            style="width:200px"
            size="small"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <!--  <el-form-item label="赔偿方式" prop="compensationMethod">
          <el-checkbox-group v-model="complaintAdd.compensationMethod" size="small">
            <el-checkbox v-for="(item,index) in compensationList" :key="index" :label="item.dictKey">{{ item.dictValue }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="退款金额" prop="refundAmount">
          <el-input v-model="complaintAdd.refundAmount" type="number" size="small" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="诚意金" prop="damages">
          <el-input v-model="complaintAdd.damages" type="number" size="small" style="width:200px"></el-input>
        </el-form-item>-->
        <el-form-item label="投诉内容" prop="complaintContent">
          <el-input
            type="textarea"
            v-model.trim="complaintAdd.complaintContent"
            size="small"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 4, maxRows:6}"
          ></el-input>
        </el-form-item>
        <el-form-item label="处理结果" prop="processingResults">
          <el-input
            type="textarea"
            v-model.trim="complaintAdd.processingResults"
            size="small"
            maxlength="50"
            show-word-limit
            :autosize="{ minRows: 4, maxRows:6}"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleAddcomplaint('complaintAdd')">添加</el-button>
          <el-button @click="handlecomplaintResetForm('complaintAdd')" size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 备款日志 -->
    <el-dialog title="日志" :visible.sync="LogFormVisible" width="width:400px">
      <div class="radio">显示方式：
        <el-radio-group v-model="reverse">
          <el-radio :label="true">倒序</el-radio>
          <el-radio :label="false">正序</el-radio>
        </el-radio-group>
      </div>
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in LogList"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :timestamp="activity.createTime"
        >
          <h5>{{activity.operator}}</h5>
          <h4 v-html="activity.action">{{activity.action}}</h4>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
    <!-- 图片放大功能 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 投诉申请退款 -->
    <el-dialog
      title="投诉申请退款"
      :visible.sync="complaintRefundVisible"
      :show-close="false"
      :before-close="handleClose"
    >
      <complaintRefund :complaintListEdit="complaintListEdit" @close="handelcomplaintDialogReset"></complaintRefund>
    </el-dialog>
    <!-- 异常申请退款 -->
    <el-dialog
      title="异常申请退款"
      :visible.sync="AbnormalRefundVisible"
      :show-close="false"
      :before-close="handleCloseAbnormal"
    >
      <abnormalRefund :abnormalEdit="abnormalEdit" @close="handelDialogReset"></abnormalRefund>
    </el-dialog>
    <!-- 退款不退货 投诉 -->
    <el-dialog
      title="退款不退货"
      :visible.sync="NotrefundVisible"
      :show-close="false"
      :before-close="handleCloseNotrefund"
    >
      <notrefund :complaintListEditnot="complaintListEdit" @close="handelNotrefundReset"></notrefund>
    </el-dialog>
    <!-- 退款不退货 异常 -->
    <el-dialog
      title="退款不退货"
      :visible.sync="AbnormalnotRefundVisible"
      :show-close="false"
      :before-close="handleCloseAbnormalnotRefund"
    >
      <abnormalnotRefund :abnormalEditnot="abnormalEdit" @close="handelDialogResetnot"></abnormalnotRefund>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination"; // 分页
import complaintRefund from "@/components/workorder"; // 投诉退款申请
import abnormalRefund from "@/components/abnormalRefund"; // 投诉退款申请
import notrefund from "@/components/notrefund"; // 投诉退货不退款申请
import abnormalnotRefund from "@/components/abnormalnotRefund"; // 投诉退货不退款申请
import checked from "@/assets/image/checkeds.png";
import {
  //接口
  ResponsibleDepartmentList,
  CakeWhereaboutsList,
  ReminderTypeList,
  ProvisionsOperationList,
  WorkOrderList,
  ReserveOrderList,
  UnsubscribePage,
  CompensationMethod,
  FullRefundList,
  RefundReasonList,
  RefundGradeList,
  RefundTypeList,
  WorkOrderRefundPage,
  updateWorkOrder, // 更新保存备款
  getApplyRefund, //申请退款
  ApprovalPass, // 通过
  ApprovalNotPass, // 不通过
  OrderOperateLog, // 日志
  updateWorkOrderRefund, //退款编辑
  getApprovalList, // 审核状态
  // 投诉
  DepartmentList, //投诉责任部门列表
  // DepartmentErrorTypeList, //部门失误类型列表
  getComplaintLevelList, //投诉等级列表
  getComplaintChannelList, //投诉渠道列表
  getHandleStateList, //处理状态
  addWorkOrderComplaint,
  OrderComplaintPage,
  updateWorkOrderComplaint, //投诉编辑
  getWorkOrderProblemPage, //问题编辑
  transferWorkOrderProblem, // 转问题
  // getlaunchRefund, //投诉退款
  updateWorkOrderProblem, // 问题
  AbnormalChannelList, // 异常
  getWorkOrderAbnormalPage, // 异常工单查询
  updateWorkOrderAbnormal, //异常工单编辑
  getWorkOrderQueryList, //工单查询
  // workOrderAbnormalLaunchRefund, // 异常退款
  getWorkOrderLossPage, //报损工单
  getRefundModeList, //退款方式
  deptdepts
} from "@/api/workorder";
export default {
  components: {
    Pagination,
    complaintRefund,
    abnormalRefund,
    notrefund,
    abnormalnotRefund
  },
  data() {
    return {
      checked,

      tabs: [
        //标签数据
        {
          name: "催单工单"
        },
        {
          name: "备款工单"
        },
        {
          name: "投诉工单"
        },

        {
          name: "问题工单"
        },
        {
          name: "异常工单"
        },
        {
          name: "退订工单"
        },
        {
          name: "退款工单"
        },
        {
          name: "报损工单"
        },
        {
          name: "工单查询"
        }
      ],
      reminderstotal: 0,
      damagetotal: 0,
      total: 0,
      compensationMethodName: [],
      reverse: false,
      LogFormVisible: false,
      NotrefundVisible: false,
      AbnormalnotRefundVisible: false,
      imageUrl: "", //退款二维码
      LogList: [], //日志表
      showEdit: [],
      cityList: [], // 城市选择
      cakestatusList: [], // 蛋糕状态
      dealstatusList: [], // 处理状态
      remindertypeList: [], // 催单类型
      provisionsOperationList: [], //备款状态
      departmentList: [], // 责任部门
      ComplaintdepartmentList: [], //失误部门
      departmentTypeList: [], // 责任部门失误类型
      cakewherelist: [], //蛋糕去向
      channelzlist: [], //渠道
      Editrefund: "",
      // 工单查询
      workorderform: {
        cityId: "",
        xmbzNo: "", //订单号
        platformNo: "", //第三方平台单号
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        phone: "" //收货人手机号
        // page: 1, //页码
        // size: 10 //每页页码
      },
      workorderlist: [], // 工单列���

      // 催单数据start-----------------------------------------------------------------
      indexs: 0, // 催单索引值
      remindersform: {
        cityId: "",
        xmbzNo: "",
        reminderType: "", //后台单号
        operator: "", //申请人
        delivery: "", //配送员
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        cityId: "", //城市id
        warehouse: "", //  分仓
        channel: "", //  渠道
        receiverPhone: "", //收货人手机号
        page: 1, //页码
        size: 10 //每页页码
      },
      reminderslist: [], // 催单工单列表
      cityList: [],
      //备款数据-------------------------------------------------------------------------------
      damagedform: {
        cityId: "",
        xmbzNo: "", //后台单号
        operator: "", //申请人
        personDept: "", //责任部门
        personLiable: "", //责任人
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        provisionsStatus: "", //备款状态 1:已抵用 2:未抵用
        cakeWhereabouts: "", //蛋糕去向 1:生产中 2:在分仓 3:配送中 4:其他
        page: 1, //页码
        size: 10 //每页页码
      },
      damagedList: [], //备款列表
      damagelistindex: -1, //备款索引值
      damagedialogStatus: "",
      damageStatus: "",
      damageformEdit: "",
      Logdamageshow: true,
      damageShow: true,
      damageEditShow: false,
      damageformPersonDept: "",
      damageformPersonName: "",
      damageformrules: {
        personLiable: [
          {
            required: true,
            message: "责任人必填",
            trigger: "blur"
          },
          {
            max: 10,
            message: "长度在10个字符以内",
            trigger: "blur"
          }
        ],
        provisionsContent: [
          {
            required: true,
            message: "备款内容必填",
            trigger: "blur"
          }
        ]
      },
      complaintListEditrules: {
        personLiable: [
          {
            required: true,
            message: "责任人必填",
            trigger: "blur"
          },
          {
            max: 10,
            message: "长度在10个字符以内",
            trigger: "blur"
          }
        ],
        provisionsContent: [
          {
            required: true,
            message: "投诉内容必填",
            trigger: "blur"
          }
        ],
        processingResults: [
          {
            required: true,
            message: "处理结果必填",
            trigger: "blur"
          }
        ]
      },
      abnormalEditrules: {
        personLiable: [
          {
            required: true,
            message: "责任人必填",
            trigger: "blur"
          },
          {
            max: 10,
            message: "长度在10个字符以内",
            trigger: "blur"
          }
        ],
        abnormalContent: [
          {
            required: true,
            message: "投诉内容必填",
            trigger: "blur"
          }
        ],
        processingResults: [
          {
            required: true,
            message: "处理结果必填",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "手机必填",
            trigger: "blur"
          }
        ]
      },
      chargebackEditrules: {
        applyReason: [
          {
            required: true,
            message: "申请原因必填",
            trigger: "blur"
          }
        ],
        store: [
          {
            required: true,
            message: "门店必填",
            trigger: "blur"
          }
        ],
        refundMoney: [
          {
            required: true,
            message: "退款金额必填",
            trigger: "blur"
          }
        ]
      },
      problemTicketEditrules: {
        personLiable: [
          {
            required: true,
            message: "责任人必填",
            trigger: "blur"
          },
          {
            max: 10,
            message: "长度在10个字符以内",
            trigger: "blur"
          }
        ],
        complaintContent: [
          {
            required: true,
            message: "投诉内容必填",
            trigger: "blur"
          }
        ],
        processingResults: [
          {
            required: true,
            message: "处理结果必填",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "手机号码必填",
            trigger: "blur"
          }
        ]
      },

      //退定数据 -------------------------------------------------------------------------------
      unsubscribeform: {
        cityId: "",
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformOrderId: "", //第三方平台单号
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        page: 1, //页码
        size: 10 //每页页码
      },
      unsubscribeList: [],
      // 报损工单---------------------------------------------------------------
      Lossreport: [],
      Lossreportform: {
        cityId: "",
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformOrderId: "", //第三方平台单号
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        page: 1, //页码
        size: 10 //每页页码
      },
      //投诉查询条件------------------------------------------------------------------
      complaintindex: -1, //投诉
      complaindialogStatus: "",
      commethodNameList: [],
      comStatus: "",
      ComplaintVisible: false,
      Complaintform: {
        page: 1, //页码
        size: 10, //每页页���
        cityId: "",
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformNo: "", //第三方平台单号
        phone: "", //手机号
        handleState: "", // 处理状态
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        responsibleDepartment: "", //责任部门
        departmentErrorType: "" //失误类型
      },
      complaintAdd: {
        xmbzNo: "", //订单号
        platformNo: "", //第三方
        responsibleDepartment: "", //责任部门
        departmentErrorType: "", //失误类型
        complaintLevel: "", //等级
        complaintChannel: "", //渠道
        personLiable: "", // 责任人
        phone: "", //手机号
        compensationMethod: [], //赔偿方式
        refundAmount: "", //退款金额
        damages: "", //诚意金
        complaintContent: "", //投诉内容
        processingResults: "" //处理结果
      },
      ComplaintList: [],
      complaintListEdit: [],
      complaintshowEdit: [],
      compensationList: [], //赔偿方式
      ComplaintChannelList: [], //投诉渠道
      ComplaintLevelList: [], // 投诉等级
      refundrules: {
        xmbzNo: [
          {
            required: true,
            message: "后台单号为空",
            trigger: "blur"
          },
          {
            pattern: /^[0-9a-zA-Z]+$/,
            message: "后台单号为数字字母混合",
            trigger: "blur"
          }
        ],
        platformNo: [
          {
            required: true,
            message: "平台单号为空",
            trigger: "blur"
          },
          {
            pattern: /^[0-9a-zA-Z]+$/,
            message: "后台单号为数字字母混合",
            trigger: "blur"
          }
        ],
        responsibleDepartment: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change"
          }
        ],
        departmentErrorType: [
          {
            required: true,
            message: "请选择失误类型",
            trigger: "change"
          }
        ],
        complaintLevel: [
          {
            required: true,
            message: "请选择投诉等级",
            trigger: "change"
          }
        ],
        complaintChannel: [
          {
            required: true,
            message: "请选择投诉渠道",
            trigger: "change"
          }
        ],
        personLiable: [
          {
            required: true,
            message: "请输入责任人",
            trigger: "blur"
          },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "change"
          },
          {
            pattern: 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/,
            message: "手机号格式不正确",
            trigger: "blur"
          }
        ],
        damages: [
          {
            required: true,
            message: "请输入诚意金",
            trigger: "change"
          }
        ],
        refundAmount: [
          {
            required: true,
            message: "请输入退款金额",
            trigger: "change"
          }
        ],
        complaintContent: [
          {
            required: true,
            message: "请输入投诉内容",
            trigger: "change"
          }
        ],
        processingResults: [
          {
            required: true,
            message: "请选择处理结果",
            trigger: "change"
          }
        ]
      },
      complaintShow: true,
      complaintEditShow: false,
      responsibleDepartmentIds: "", //部门类型ID
      responsibleDepartmentNames: "", //部门名称
      responsibleDepartmentNamesOther: "",
      responsibleDepartmentOtherIds: "",
      departmentErrorTypeIds: "", //失误类型ID
      resdepartmentErrorTypeNames: "", //,//失误类型名称
      complaintOther: true, //投诉其他按钮
      //公共------------------------------------------------------------------

      // 退款工单数据------------------------------------------------------------------
      methodNameList: [],
      compensationMethod: [""],
      cakeCompensatePrice: "",
      chargebackIndex: -1,
      chargebackStatus: "",
      refundAdd: {
        refundCode: ""
      },
      typeKind: [],
      refundmode: 1, //退款方式
      ApprovalStatus: [], //审核状态
      chargebackform: {
        cityId: "",
        xmbzNo: "", //订单号
        refundApplyPeople: "", //申请人
        platformNo: "", //第三方平台单号
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束���间
        approvalPass: "", //审批是否通过  0:否 1:是
        page: 1, //页码
        size: 10 //每页页码
      },
      fullrefund: [], // 全额退款
      GradeList: [], // 退款等级
      ReasonList: [], //退款原因
      RefundTypeList: [], //退款类型
      chargebackList: [],
      chargebackEdit: {},
      chargebackShow: {},
      ChargebackformEdit: {},
      RequetrefundShows: true,
      RequetrefundShowsEdit: false,
      // RefundModeList: [], //退款方式
      chargebackEditotherShow: true,
      // 退款下拉数据
      refundReasonIds: "", //退款原因id
      refundReasonNames: "",
      refundTypeIds: "", //退款类型ID
      refundTypeNames: "",
      refundGradeIds: "", //退款等级ID
      refundGradeNames: "",
      cakeWhereIds: "", //蛋糕去向ID
      cakeWhereNames: "",
      // 问题工单---------------------------------------------------------------------------------------------------
      problemTickindex: -1, //问题工单
      problemStatus: "",
      proStatus: "",
      problemTicket: {
        cityId: "",
        page: 1, //页码
        size: 10, //每页页码
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformNo: "", //第三方平台单号
        phone: "", //手机号
        handleState: "", // 处理状态
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        responsibleDepartment: "", //责任部门
        departmentErrorType: "" //失误类型
      },
      problemTicketList: [],
      problemTicketEdit: {},
      problemTicketShow: {},
      problemTicketShows: true,
      problemTicketShowEdits: false,
      problemTicketOther: true,
      //异常工单 ---------------------------------------------------------------------------------------------------
      abnormalIndex: -1, // 异常工单
      abnormalStatus: "",
      abnorStatus: "",
      abnormalEdit: {},
      // 图片
      dialogImageUrl: "",
      dialogVisible: false,

      abnormalChannelList: [],
      abnormalmethod: [],
      abnormalEditShow: false,
      abnormalShow: true,
      abnormalother: true,
      abnormalFrom: {
        cityId: "",
        page: 1, //页码
        size: 10, //每页页码
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformNo: "", //第三方平台单号
        phone: "", //手机号
        handleState: "", // 处理状态
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        responsibleDepartment: "", //责任部门
        departmentErrorType: "" //失误类型
      },
      abnormalList: [],
      Launchdate: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate2: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate3: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate4: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate5: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate6: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate7: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate8: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate9: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      deptName: "",
      deptNamedamag: "",
      deptNameComplaint: "",
      deptNameproblemTicket: "",
      deptNameabnormal: "",
      deptNameunsubscribe: "",
      deptNamechargeback: "",
      deptNameLossreport: "",
      deptNameworkorder: "",
      // 投诉退款申请
      complaintRefundVisible: false,
      //异常申请退款
      AbnormalRefundVisible: false
    };
  },
  mounted() {
    this.department(); //责任部门
    this.cakeWhere(); //蛋糕去向
    this.reminderType(); //催单类型
    this.provisionsOperation(); //备款状态
    this.getWorkOrderList(); //催单分页
    this.CompensationMethodList(); // 赔偿方式
    this.fullRefundList(); // 全额退款
    this.refundGradeList(); // 退款等级
    this.refundReasonList();
    this.getApprovalStatus();
    this.getctiy();
    window.addEventListener("keydown", this.keyupEnter);
  },
  watch: {
    ComplaintVisible() {
      if (this.ComplaintVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    LogFormVisible() {
      if (this.LogFormVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    dialogVisible() {
      if (this.dialogVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    complaintRefundVisible() {
      if (this.complaintRefundVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    AbnormalRefundVisible() {
      if (this.AbnormalRefundVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    NotrefundVisible() {
      if (this.NotrefundVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    AbnormalnotRefundVisible() {
      if (this.AbnormalnotRefundVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    damageEditShow() {
      if (this.damageEditShow == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    complaintEditShow() {
      if (this.complaintEditShow == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    problemTicketShowEdits() {
      if (this.problemTicketShowEdits == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    abnormalEditShow() {
      if (this.abnormalEditShow == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    RequetrefundShowsEdit() {
      if (this.RequetrefundShowsEdit == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    }
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },

  methods: {
    // 选择框回车失焦
    selectBlur(e) {
      if (e.keyCode == 13) {
        if (this.indexs == 0) {
          this.$refs["deptNameRef"].blur();
          this.$refs["reminderTypeRef"].blur();
        } else if (this.indexs == 1) {
          this.$refs["deptNameRef"].blur();
          this.$refs["damagedformRef"].blur();
          this.$refs["provisionsStatusRef"].blur();
          this.$refs["cakeWhereaboutsRef"].blur();
        } else if (this.indexs == 2) {
          this.$refs["deptNameRef"].blur();
          this.$refs["handleStateRef"].blur();
          this.$refs["responsibleDepartmentRef1"].blur();
          this.$refs["departmentErrorTypeRef1"].blur();
        } else if (this.indexs == 3) {
          this.$refs["deptNameRef"].blur();
          this.$refs["handleStateRef"].blur();
          this.$refs["responsibleDepartmentRef"].blur();
          this.$refs["departmentErrorTypeRef"].blur();
        } else if (this.indexs == 4) {
          this.$refs["deptNameRef"].blur();
          this.$refs["handleStateRef"].blur();
          this.$refs["responsibleDepartmentRef"].blur();
          this.$refs["departmentErrorTypeRef"].blur();
        } else if (this.indexs == 5) {
          this.$refs["deptNameRef"].blur();
        } else if (this.indexs == 6) {
          this.$refs["deptNameRef"].blur();
          this.$refs["approvalPassRef"].blur();
        } else if (this.indexs == 7) {
          this.$refs["deptNameRef"].blur();
        } else if (this.indexs == 8) {
          this.$refs["deptNameRef"].blur();
        }
        e.returnValue = false;
      }
    },

    // 回车事件
    keyupEnter(e) {
      if (e.keyCode == 13) {
        if (this.indexs == 0) {
          // 催单
          this.handleFilterReminders(this.Launchdate);
        } else if (this.indexs == 1) {
          // 备款工单
          this.handleFilterReserve(this.Launchdate2);
        } else if (this.indexs == 2) {
          // 投诉
          this.handleFiltercomplaint(this.Launchdate3);
        } else if (this.indexs == 3) {
          // 问题
          this.handleFilterproblem(this.Launchdate4);
        } else if (this.indexs == 4) {
          // 异常工单
          this.handleFilterabnormal(this.Launchdate5);
        } else if (this.indexs == 5) {
          // 退订
          this.handleFifterunsubscribe(this.Launchdate6);
        } else if (this.indexs == 6) {
          // 退款
          this.handleterFifterRefund(this.Launchdate7);
        } else if (this.indexs == 7) {
          // 报损
          this.handleFifterDamaged(this.Launchdate8);
        } else if (this.indexs == 8) {
          // 工单
          this.handleFilterwork(this.Launchdate9);
        }
      }
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
      window.addEventListener("keydown", this.keyupEnter);
    },
    deactivated() {
      window.removeEventListener("keydown", this.keyupEnter);
    },
    getctiy() {
      deptdepts("").then(res => {
        res.data.data.unshift({
          id: 0,
          deptName: "全国"
        });
        this.deptName = res.data.data[0].deptName;
        this.remindersform.cityId = res.data.data[0].id;
        this.cityList = res.data.data;
      });
    },
    // 获取城市
    handleCity(data) {
      if (data) {
        this.deptName = data.label;
        this.remindersform.cityId = data.value;
      } else {
        this.remindersform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content;
        this.deptName = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content;
      }
    },
    handleCitydamag(data) {
      if (data) {
        this.deptNamedamag = data.label;
        this.damagedform.cityId = data.value;
      } else {
        this.damagedform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content;
        this.deptNamedamag = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content;
      }
    },
    handleCityComplaint(data) {
      if (data) {
        this.deptNameComplaint = data.label;
        this.Complaintform.cityId = data.value;
      } else {
        this.Complaintform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content;
        this.deptNameComplaint = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content;
      }
    },
    handleCityproblemTicket(data) {
      if (data) {
        this.deptNameproblemTicket = data.label;
        this.problemTicket.cityId = data.value;
      } else {
        this.problemTicket.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content;
        this.deptNameproblemTicket = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content;
      }
    },
    handleCityabnormal(data) {
      if (data) {
        this.deptNameabnormal = data.label;
        this.abnormalFrom.cityId = data.value;
      } else {
        this.abnormalFrom.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content;
        this.deptNameabnormal = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content;
      }
    },
    handleCityunsubscribe(data) {
      if (data) {
        this.deptNameunsubscribe = data.label;
        this.unsubscribeform.cityId = data.value;
      } else {
        this.unsubscribeform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content;
        this.deptNameunsubscribe = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content;
      }
    },
    handleCitychargeback(data) {
      if (data) {
        this.deptNamechargeback = data.label;
        this.chargebackform.cityId = data.value;
      } else {
        this.chargebackform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content;
        this.deptNamechargeback = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content;
      }
    },
    handleCityLossreport(data) {
      if (data) {
        this.deptNameLossreport = data.label;
        this.Lossreportform.cityId = data.value;
      } else {
        this.Lossreportform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content;
        this.deptNameLossreport = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content;
      }
    },
    handleCityworkorder(data) {
      if (data) {
        this.deptNameworkorder = data.label;
        this.workorderform.cityId = data.value;
      } else {
        this.workorderform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content;
        this.deptNameworkorder = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content;
      }
    },
    // 切换tabs
    handleTabs(item) {
      this.indexs = item;
      if (this.indexs == 0) {
        this.getWorkOrderList(); //催单分页
      } else if (this.indexs == 1) {
        this.getReserveOrderList(); //备款工单列表
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          });
          this.deptNamedamag = res.data.data[0].deptName;
          this.damagedform.cityId = res.data.data[0].id;
          this.cityList = res.data.data;
        });
      } else if (this.indexs == 2) {
        this.getComplaintList(); //投诉工单
        this.getComplaintLevel(); //投诉等级
        this.getComplaintChannel(); //投诉渠道
        this.getHandleState(); //处理状态
        this.responsibleDepartmentNamesOther = "";
        this.Complaintform.departmentErrorType = "";
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          });
          this.deptNameComplaint = res.data.data[0].deptName;
          this.Complaintform.cityId = res.data.data[0].id;
          this.cityList = res.data.data;
        });
      } else if (this.indexs == 3) {
        this.getPrombleList(); //问题工单
        this.getComplaintLevel(); //投诉等级
        this.getComplaintChannel(); //投诉渠道
        this.getHandleState(); //处理状态
        this.responsibleDepartmentNamesOther = "";
        this.problemTicket.departmentErrorType = "";
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          });
          this.deptNameproblemTicket = res.data.data[0].deptName;
          this.problemTicket.cityId = res.data.data[0].id;
          this.cityList = res.data.data;
        });
      } else if (this.indexs == 4) {
        this.getabnormalList(); //异常工单
        this.getComplaintLevel(); //投诉等级
        this.getComplaintChannel(); //投诉渠道
        this.getHandleState(); //处理状态
        this.getAbnormalChannelList(); // 等级
        this.responsibleDepartmentNamesOther = "";
        this.abnormalFrom.departmentErrorType = "";
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          });
          this.deptNameabnormal = res.data.data[0].deptName;
          this.abnormalFrom.cityId = res.data.data[0].id;
          this.cityList = res.data.data;
        });
      } else if (this.indexs == 5) {
        this.getunsubscribeList(); //退定工单
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          });
          this.deptNameunsubscribe = res.data.data[0].deptName;
          this.unsubscribeform.cityId = res.data.data[0].id;
          this.cityList = res.data.data;
        });
      } else if (this.indexs == 6) {
        this.getabchargebackList(); //退款工单
        this.getRefundModeList();
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          });
          this.deptNamechargeback = res.data.data[0].deptName;
          this.chargebackform.cityId = res.data.data[0].id;
          this.cityList = res.data.data;
        });
      } else if (this.indexs == 7) {
        this.getLossreport(); //报损工单查询
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          });
          this.deptNameLossreport = res.data.data[0].deptName;
          this.Lossreportform.cityId = res.data.data[0].id;
          this.cityList = res.data.data;
        });
      } else if (this.indexs == 8) {
        this.getOrderList(); //工单查询
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          });
          this.deptNameworkorder = res.data.data[0].deptName;
          this.workorderform.cityId = res.data.data[0].id;
          this.cityList = res.data.data;
        });
      }
    },
    // 公共模块start---------------------------------------------------------------------------------
    getApprovalStatus() {
      //审核状态
      getApprovalList("").then(response => {
        this.ApprovalStatus = response.data.data;
      });
    },
    getRefundModeList() {
      getRefundModeList().then(res => {
        this.RefundModeList = res.data.data;
      });
    },
    getAbnormalChannelList() {
      //异常
      AbnormalChannelList("").then(response => {
        this.abnormalChannelList = response.data.data;
      });
    },
    department() {
      // ****责任部门
      ResponsibleDepartmentList("").then(response => {
        this.departmentList = response.data.data;
      });
    },
    getComplaintdepartmentList() {
      DepartmentList("").then(response => {
        this.ComplaintdepartmentList = response.data.data;
      });
      this.Complaintform.departmentErrorType = "";
      this.problemTicket.departmentErrorType = "";
      this.abnormalFrom.departmentErrorType = "";
      this.resdepartmentErrorTypeNames = "";
    },
    onChangeStripe(data) {
      if (data) {
        this.responsibleDepartmentIds = data.value;
        this.responsibleDepartmentNames = data.label;
        // this.responsibleDepartmentNamesOther = data.label;
        let obj = {};
        obj = this.ComplaintdepartmentList.find(item => {
          return item.dictKey === data.value;
        });
        this.initBindStripeTap(obj.dictValue);
      } else {
        this.responsibleDepartmentIds = "";
        this.responsibleDepartmentNames = "";
        this.Complaintform.departmentErrorType = "";
        this.problemTicket.departmentErrorType = "";
        this.abnormalFrom.departmentErrorType = "";
      }
    },

    onChangeStripeType(data) {
      if (data) {
        this.responsibleDepartmentOtherIds = data.value;
        this.responsibleDepartmentNamesOther = data.label;
        let obj = {};
        obj = this.ComplaintdepartmentList.find(item => {
          return item.dictKey === data.value;
        });
        this.initBindStripeTap(obj.dictValue);
      } else {
        this.responsibleDepartmentOtherIds = "";
        this.responsibleDepartmentNamesOther = "";
        this.Complaintform.departmentErrorType = "";
        this.problemTicket.departmentErrorType = "";
        this.abnormalFrom.departmentErrorType = "";
      }
    },

    onChangeStripeErrorType(data) {
      if (data) {
        this.departmentErrorTypeIds = data.value; //失误类型ID
        this.resdepartmentErrorTypeNames = data.label; //,//失误类型名称
      } else {
        this.departmentErrorTypeIds = ""; //失误类型ID
        this.resdepartmentErrorTypeNames = ""; //,//失误类型名称
      }
    },
    initBindStripeTap(data) {
      this.departmentTypeList = [];
      RefundTypeList({
        name: data
      }).then(response => {
        this.departmentTypeList = response.data.data;
      });
    },
    getdepartmentErrorTypeIds(data) {
      this.departmentErrorTypeIds = data.value;
      this.departmentErrorTypeNames = data.lable;
    },
    getHandleState() {
      // 投诉状态处理
      getHandleStateList("").then(response => {
        this.dealstatusList = response.data.data;
      });
    },
    getComplaintLevel() {
      //投诉等级列表
      getComplaintLevelList("").then(response => {
        this.ComplaintLevelList = response.data.data;
      });
    },
    getComplaintChannel() {
      //投诉渠道列表
      getComplaintChannelList("").then(response => {
        this.ComplaintChannelList = response.data.data;
      });
    },
    getRadio() {},
    cakeWhere() {
      // ****蛋糕去向
      CakeWhereaboutsList("").then(response => {
        this.cakewherelist = response.data.data;
      });
    },
    reminderType() {
      // ****催单类型
      ReminderTypeList("").then(response => {
        this.remindertypeList = response.data.data;
      });
    },

    provisionsOperation() {
      // ****备款状态
      ProvisionsOperationList("").then(response => {
        this.provisionsOperationList = response.data.data;
      });
    },
    CompensationMethodList() {
      // ****备款状态
      CompensationMethod("").then(response => {
        this.compensationList = response.data.data;
      });
    },
    fullRefundList() {
      // ****全额退款
      FullRefundList("").then(response => {
        this.fullrefund = response.data.data;
      });
    },
    refundGradeList() {
      // 退款等级
      RefundGradeList("").then(response => {
        this.GradeList = response.data.data;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.handelcomplaintDialogReset();

          done();
          this.complaindialogStatus = "created";
          this.getComplaintList();
        })
        .catch(() => {});
    },
    handleCloseAbnormal(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.handelDialogReset();
          done();
        })
        .catch(() => {});
    },
    handleCloseNotrefund(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.handelNotrefundReset();
          done();
        })
        .catch(() => {});
    },
    handleCloseAbnormalnotRefund(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.handelDialogResetnot();
          done();
        })
        .catch(() => {});
    },

    refundReasonList() {
      // 退款原因：
      RefundReasonList("").then(response => {
        this.ReasonList = response.data.data;
      });
    },
    // initBindStripeTap(data) {
    //   this.departmentTypeList = [];
    //   RefundTypeList({
    //     name: data
    //   }).then(response => {
    //     this.departmentTypeList = response.data.data;
    //   })

    // },
    handlerefundReason(item) {
      if (item) {
        this.refundReasonIds = item.value;
        this.refundTypeNames = "";
        RefundTypeList({
          name: item.label
        }).then(response => {
          this.RefundTypeList = response.data.data;
        });
      } else {
        this.$message({
          type: "warning",
          message: "请先选择退款原因!"
        });
        return false;
      }
    },
    handlerefundGrade(data) {
      this.refundGradeIds = data;
    },
    handleCakeWhere(data) {
      this.cakeWhereIds = data.value;
    },

    //催单模块 start-------------------------------------------------------------------------------------
    getWorkOrderList() {
      // 催单工单列表分页
      (this.remindersform.workOrderStartTime = this.dayjs(
        this.remindersform.workOrderStartTime
      )
        .format("YYYY-MM-DD HH:mm:00")
        .toString()), //配送开始时间
        (this.remindersform.workOrderEndTime = this.dayjs(
          this.remindersform.workOrderEndTime
        )
          .format("YYYY-MM-DD HH:mm:59")
          .toString()), //配送结束时间
        WorkOrderList(this.remindersform).then(response => {
          this.reminderslist = response.data.data.rows;
          this.reminderstotal = response.data.data.total;
        });
    },
    handleFilterReminders(times) {
      // 催单工单列表查询
      this.remindersform.page = 1;
      if (times) {
        this.remindersform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString();
        this.remindersform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString();
      }
      var time1 = Date.parse(this.remindersform.workOrderStartTime);
      var time2 = Date.parse(this.remindersform.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.remindersform.page = 1;
        this.getWorkOrderList();
      }
    },
    //备款模块 start-------------------------------------------------------------------------------------
    getReserveOrderList() {
      //备款模块列表
      ReserveOrderList(this.damagedform).then(response => {
        this.damagedList = response.data.data.rows;
        this.damagetotal = response.data.data.total;
        this.damagedList.map(item => {
          this.damageformPersonName = item.personDeptName;
        });
        this.damagedialogStatus = "create";
        this.damageEditShow = false;
        this.damagelistindex = "-1";
        this.damageShow = true;
        this.Logdamageshow = true;
        this.$refs.damagemain.scrollTop = 0;
      });
    },
    headReserveDetils(row, index, formName) {
      // 备款详情进入
      this.damagedialogStatus = "update";
      this.damageStatus = "create";
      this.damageformEdit = row;
      this.showEdit = [];
      this.damagelistindex = index;
      this.damageEditShow = false;
      this.damageShow = true;
      this.Logdamageshow = true;
      this.damageformPersonName = row.personDeptName;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    handlerEditdamage(row) {
      this.damageStatus = "update";
      //// 备款编辑
      this.showEdit = row;
      this.damageEditShow = true;
      this.damageShow = false;
      this.Logdamageshow = false;
    },
    handlerdamageCancel(item, formName) {
      this.damageStatus = "create";
      this.damageEditShow = false;
      this.damageShow = true;
      this.Logdamageshow = true;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    getdamageformPersonDept(data) {
      this.damageformPersonDept = data.value;
      this.damageformPersonName = data.label;
    },
    handlerSavedamage(item, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (item.personLiable == "") {
            this.$message({
              message: "责任人不能为空",
              type: "warning"
            });
            return false;
          } else if (item.provisionsContent == "") {
            this.$message({
              message: "备款内容不能为空",
              type: "warning"
            });
            return false;
          } else if (item.provisionsStatus != "1") {
            if (item.offsetNo == "") {
              this.$message({
                message: "抵用单号不能为空",
                type: "warning"
              });
              return false;
            }
          }
          const itemsave = {
            id: item.id,
            orderDetailId: item.orderDetailId,
            personDept:
              this.damageformPersonDept == ""
                ? item.personDept
                : this.damageformPersonDept,
            personLiable: item.personLiable,
            cakeWhereabouts: item.cakeWhereabouts,
            provisionsContent: item.provisionsContent,
            offsetNo: item.offsetNo,
            cityId: item.cityId,
            skuCode: item.skuCode
          };
          // 备款保存提交
          this.$confirm("确定修改好备款工单信息了吗,是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              updateWorkOrder(itemsave).then(() => {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
                this.damagedialogStatus = "create";
                this.getReserveOrderList();
                this.damageEditShow = false;
                this.damageShow = true;
                this.Logdamageshow = true;
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消修改"
              });
              this.damagedialogStatus = "create";
              this.getReserveOrderList();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleFilterReserve(times) {
      //备款列表查询
      this.damagedform.page = 1;
      if (times) {
        this.damagedform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString();
        this.damagedform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString();
      }
      var time1 = Date.parse(this.damagedform.workOrderStartTime);
      var time2 = Date.parse(this.damagedform.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.damagedform.page = 1;
        this.getReserveOrderList();
      }
    },
    handlerLogdamage(item) {
      //备款日志
      this.LogFormVisible = true;
      this.reverse = false;
      OrderOperateLog({
        orderId: item.orderId
      }).then(response => {
        this.LogList = response.data.data;
      });
    },

    //投诉start ----------------------------------------------------------------------------
    getComplaintList() {
      //投诉列表
      OrderComplaintPage(this.Complaintform).then(response => {
        response.data.data.rows.map(item => {
          if (item.compensationMethod) {
            item.compensationMethod = item.compensationMethod.split(",");
          }
        });
        this.ComplaintList = response.data.data.rows;
        this.total = response.data.data.total;
        this.complaindialogStatus = "created";
        this.complaintindex = -1;
        this.complaintShow = true;
        this.complaintEditShow = false;
        this.$refs.Complaintmain.scrollTop = 0;
      });
    },
    handleFiltercomplaint(times) {
      //投诉查询
      this.Complaintform.page = 1;
      this.Complaintform.responsibleDepartment = this.responsibleDepartmentOtherIds;
      if (times) {
        this.Complaintform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString();
        this.Complaintform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString();
      }
      var time1 = Date.parse(this.Complaintform.workOrderStartTime);
      var time2 = Date.parse(this.Complaintform.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.getComplaintList();
      }
    },
    headleComplaintListDetils(row, index, formName) {
      //投诉详情 进入
      this.complaindialogStatus = "update";
      this.comStatus = "create";
      this.complaintListEdit = row;
      this.complaintshowEdit = [];
      this.complaintindex = index;
      this.complaintEditShow = false;
      this.complaintOther = true;
      this.complaintShow = true;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    handlerEditcomplaint(row) {
      // 投诉编辑
      this.comStatus = "update";
      this.complaintshowEdit = row;
      this.complaintShow = false;
      this.complaintEditShow = true;
      this.complaintOther = false;

      this.responsibleDepartmentNames = row.responsibleDepartmentName;
      this.resdepartmentErrorTypeNames = row.departmentErrorTypeName;
    },
    handlercomplaintCancel(complaintListEdit, formName) {
      this.comStatus = "create";
      this.complaintshowEdit = [];
      this.complaintShow = true;
      this.complaintEditShow = false;
      this.complaintOther = true;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
      // this.$refs[formName].resetFields();
    },
    // handlerSavecomplaintcreate() {
    //   this.$notify({
    //     title: "警告",
    //     message: "该操作需点编辑按钮，才可保存",
    //     type: "warning"
    //   });
    // },
    handlerSavecomplaint(item, formName) {
      console.log(item.handleState);
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.resdepartmentErrorTypeNames == "") {
            this.$message({
              type: "warning",
              message: "部门失误类型不能为空"
            });
            return false;
          } else if (item.personLiable == "") {
            this.$message({
              type: "warning",
              message: "责任人不能为空"
            });
            return false;
          } else if (item.phone == "") {
            this.$message({
              type: "warning",
              message: "手机号不能为空"
            });
            return false;
          } else if (item.complaintContent == "") {
            this.$message({
              type: "warning",
              message: "投诉内容不能为空"
            });
            return false;
          } else if (item.processingResults == "") {
            this.$message({
              type: "warning",
              message: "处理结果不能为空"
            });
            return false;
          } else {
            //投诉保存提交
            const Savecompl = {
              id: item.id,
              orderId: item.orderId,
              responsibleDepartment:
                this.responsibleDepartmentIds == ""
                  ? item.responsibleDepartment
                  : this.responsibleDepartmentIds, //		责任部门 1:客户责任 2:配送部 3:生产部 4:客服部 5:运营中心 6:系统责任
              departmentErrorType:
                this.departmentErrorTypeIds == ""
                  ? item.departmentErrorType
                  : this.departmentErrorTypeIds, //		部门失误类型
              complaintLevel: item.complaintLevel, //			投诉等级
              handleState: item.handleState, //	投诉状态
              complaintChannel: item.complaintChannel, //			投诉渠道
              personLiable: item.personLiable, //			责任人
              platformNo: item.platformNo, //		第三方平台单号
              phone: item.phone, //		手机号
              refundAmount: item.refundAmount, //				退款金额
              damages: item.damages, //				赔偿金
              // compensationMethod: this.acTiveArrStringFun(this.commethodNameList), //				赔偿方式
              complaintContent: item.complaintContent, //				投诉内容
              processingResults: item.processingResults //	  处理结果
            };
            this.$confirm("确定修改好投诉工单信息了吗, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                updateWorkOrderComplaint(Savecompl).then(() => {
                  this.$message({
                    type: "success",
                    message: "保存成功"
                  });
                  this.complaindialogStatus = "created";
                  this.responsibleDepartmentIds='';
                  this.departmentErrorTypeIds='';
                  this.getComplaintList();
                  this.complaintShow = true;
                  this.complaintEditShow = false;
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消修改"
                });
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handlerProblemticket(item) {
      if (item.handleState == "1" || item.handleState == "4") {
        this.$message({
          type: "warning",
          message: "只有结案状态才能转到问题工单!"
        });
        return false;
      } else {
        // 投诉转到问题工单
        this.$confirm("确定投诉转到问题工单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            transferWorkOrderProblem({
              workOrderComplaintId: item.id
            }).then(() => {
              this.$message({
                type: "success",
                message: "已转到问题工单!"
              });
              this.complaindialogStatus = "created";
              this.getComplaintList();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消转到问题工单"
            });
          });
      }
    },
    // 投诉申请退款
    handlercomplaintRefund(item) {
      // console.log(item)
      if (item.handleState == "1" || item.handleState == "4") {
        this.$message({
          type: "warning",
          message: "只有结案状态才能申请退款!"
        });
        return false;
      } else {
        this.complaintRefundVisible = true;

        // 投诉发起退款
        // this.$confirm("确定发起该工单退款, 是否继续?", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning"
        //   })
        //   .then(() => {
        //     getlaunchRefund({
        //       workOrderComplaintId: item.id
        //     }).then(() => {
        //       this.$message({
        //         type: "success",
        //         message: "已提交退款!"
        //       });
        //       this.complaindialogStatus = "created";
        //       this.getComplaintList();
        //     });
        //   })

        //   .catch(() => {
        //     this.$message({
        //       type: "info",
        //       message: "已取消提交退款"
        //     });
        //   });
      }
    },
    //退款不退货
    handlerNotrefund(item) {
      // console.log(item)
      if (item.handleState == "1" || item.handleState == "4") {
        this.$message({
          type: "warning",
          message: "只有结案状态才能申请退款不退货!"
        });
        return false;
      } else {
        this.NotrefundVisible = true;
      }
    },
    handlAddcomplaint() {
      //添加投诉
      this.ComplaintVisible = true;
    },

    handleAddcomplaint(complaintAdd) {
      // 提交投诉
      this.$refs[complaintAdd].validate(valid => {
        if (valid) {
          if (
            this.responsibleDepartmentIds == "" ||
            this.responsibleDepartmentIds == null
          ) {
            this.$message({
              type: "warning",
              message: "请选择部门!"
            });
            return false;
          } else if (
            this.complaintAdd.departmentErrorType == "" ||
            this.complaintAdd.departmentErrorType == null
          ) {
            this.$message({
              type: "warning",
              message: "请选择失误类型!"
            });
            return false;
          } else {
            const complaintData = {
              compensationMethod: this.acTiveArrStringFun(
                this.complaintAdd.compensationMethod
              ),
              complaintChannel: this.complaintAdd.complaintChannel,
              complaintContent: this.complaintAdd.complaintContent,
              complaintLevel: this.complaintAdd.complaintLevel,
              edamages: this.complaintAdd.damages,
              departmentErrorType: this.complaintAdd.departmentErrorType,
              personLiable: this.complaintAdd.personLiable,
              phone: this.complaintAdd.phone,
              platformNo: this.complaintAdd.platformNo,
              processingResults: this.complaintAdd.processingResults,
              refundAmount: this.complaintAdd.refundAmount,
              responsibleDepartment: this.responsibleDepartmentIds,
              xmbzNo: this.complaintAdd.xmbzNo
            };
            console.log(this.complaintAdd, "this.complaintAdd");
            addWorkOrderComplaint(complaintData).then(() => {
              this.$message({
                type: "success",
                message: "提交成功!"
              });
              this.getComplaintList();
              this.ComplaintVisible = false;
              this.$refs[complaintAdd].resetFields();
            });
          }
        } else {
          this.$message({
            type: "warning",
            message: "填写相关提交内容!"
          });
          return false;
        }
      });
    },
    handlecomplaintResetForm(complaintAdd) {
      this.getComplaintList(); //投诉工单
      this.$refs[complaintAdd].resetFields();
      this.responsibleDepartmentIds = "";
      this.complaintAdd.departmentErrorType = "";
      this.responsibleDepartmentNames = "";
      this.ComplaintVisible = false;
    },
    handlerLogcomplaint(item) {
      //投诉日志
      this.LogFormVisible = true;
      this.reverse = false;
      OrderOperateLog({
        orderId: item.orderId
      }).then(response => {
        this.LogList = response.data.data;
      });
    },
    // 退订模块---------------
    getunsubscribeList() {
      UnsubscribePage(this.unsubscribeform).then(response => {
        this.unsubscribeList = response.data.data.rows;
        this.total = response.data.data.total;
      });
      //退订工单列表
      //
    },
    handleFifterunsubscribe(times) {
      //退订工单列表查询
      this.unsubscribeform.page = 1;
      if (times) {
        this.unsubscribeform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString();
        this.unsubscribeform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString();
      }
      var time1 = Date.parse(this.unsubscribeform.workOrderStartTime);
      var time2 = Date.parse(this.unsubscribeform.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.getunsubscribeList();
      }
    },
    getLossreport() {
      getWorkOrderLossPage(this.Lossreportform).then(response => {
        this.Lossreport = response.data.data.rows;
        this.total = response.data.data.total;
      });
    },
    handleFifterDamaged(times) {
      this.Lossreportform.page = 1;
      if (times) {
        this.Lossreportform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString();
        this.Lossreportform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString();
      }
      var time1 = Date.parse(this.Lossreportform.workOrderStartTime);
      var time2 = Date.parse(this.Lossreportform.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.getLossreport();
      }
    },

    // 问题工单模块-------------------------------------------
    getPrombleList() {
      // 问题工单列表
      getWorkOrderProblemPage(this.problemTicket).then(response => {
        this.problemTicketList = response.data.data.rows;
        this.total = response.data.data.total;
        this.problemTickindex = "-1";
        this.problemStatus = "created";
        this.problemTicketShows = true;
        this.problemTicketShowEdits = false;
        this.$refs.problemTicketmain.scrollTop = 0;
      });
    },
    handleFilterproblem(times) {
      this.problemTicket.page = 1;
      this.problemTicket.responsibleDepartment = this.responsibleDepartmentOtherIds;
      if (times) {
        this.problemTicket.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString();
        this.problemTicket.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString();
      }
      var time1 = Date.parse(this.problemTicket.workOrderStartTime);
      var time2 = Date.parse(this.problemTicket.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.getPrombleList();
      }

      // if (this.problemTicket.workOrderStartTime) {
      //   this.problemTicket.workOrderStartTime = this.dayjs(
      //       this.problemTicket.workOrderStartTime
      //     )
      //     .format("YYYY-MM-DD HH:mm:ss")
      //     .toString();
      // }
      // if (this.problemTicket.workOrderEndTime) {
      //   this.problemTicket.workOrderEndTime = this.dayjs(
      //       this.problemTicket.workOrderEndTime
      //     )
      //     .format("YYYY-MM-DD HH:mm:ss")
      //     .toString();
      // }

      //问题查询
    },
    handlerProblem(row, index, formName) {
      //问题工单详情进入
      this.problemStatus = "update";
      this.proStatus = "create";
      this.problemTicketEdit = row;
      this.problemTicketShow = [];
      this.problemTickindex = index;
      this.problemTicketShows = true;
      this.problemTicketShowEdits = false;
      this.problemTicketOther = true;
      this.responsibleDepartmentNames = row.responsibleDepartmentName;
      this.resdepartmentErrorTypeNames = row.departmentErrorTypeName;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    handlerEditproblem(row) {
      //问题工单编写
      this.proStatus = "update";
      this.problemTicketShow = row;
      // this.departmentErrorTypeNames=row.departmentErrorTypeName;
      this.problemTicketShows = false;
      this.problemTicketShowEdits = true;
      this.responsibleDepartmentNames = row.responsibleDepartmentName;
      this.resdepartmentErrorTypeNames = row.departmentErrorTypeName;
      this.problemTicketOther = false;
    },
    handlerproblemCancel(item, formName) {
      this.proStatus = "create";
      this.problemTicketShows = true;
      this.problemTicketShowEdits = false;
      this.problemTicketOther = true;

      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    handlerLogproblem(item) {
      //问题工单日志
      this.LogFormVisible = true;
      this.reverse = false;
      OrderOperateLog({
        orderId: item.orderId
      }).then(response => {
        this.LogList = response.data.data;
      });
    },
    // handlerSaveproblemcreate() {
    //   this.$notify({
    //     title: "警告",
    //     message: "该操作需点编辑按钮，才可保存",
    //     type: "warning"
    //   });
    // },
    handlerSaveproblem(item, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.resdepartmentErrorTypeNames == "") {
            this.$message({
              type: "warning",
              message: "部门失误类型不能为空"
            });
            return false;
          } else if (item.personLiable == "") {
            this.$message({
              type: "warning",
              message: "责任人不能为空"
            });
            return false;
          } else if (item.phone == "") {
            this.$message({
              type: "warning",
              message: "手机号不能为空"
            });
            return false;
          } else if (item.complaintContent == "") {
            this.$message({
              type: "warning",
              message: "投诉内容不能为空"
            });
            return false;
          } else if (item.processingResults == "") {
            this.$message({
              type: "warning",
              message: "处理结果不能为空"
            });
            return false;
          } else {
            const Saveproblem = {
              id: item.id,
              orderId: item.orderId,
              responsibleDepartment:
                this.responsibleDepartmentIds == ""
                  ? item.responsibleDepartment
                  : this.responsibleDepartmentIds, //		责任部门 1:客户责任 2:配送部 3:生产部 4:客服部 5:运营中心 6:系统责任
              departmentErrorType:
                this.departmentErrorTypeIds == ""
                  ? item.departmentErrorType
                  : this.departmentErrorTypeIds, //		部门失误类型
              complaintLevel: item.complaintLevel, //			投诉等级
              handleState: item.handleState, //	投诉状态
              complaintChannel: item.complaintChannel, //			投诉渠道
              personLiable: item.personLiable, //			责任人
              platformNo: item.platformNo, //		第三方平台单号
              phone: item.phone, //		手机号
              complaintContent: item.complaintContent, //				投诉内容
              processingResults: item.processingResults //	  处理结果
            };
            //问题工单保存
            this.$confirm("确定修改问题工单信息了吗, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                updateWorkOrderProblem(Saveproblem).then(() => {
                  this.$message({
                    type: "success",
                    message: "保存成功"
                  });
                  this.problemStatus = "created";
                  this.problemTicketShows = true;
                  this.problemTicketShowEdits = false;
                  this.responsibleDepartmentIds='';
                  this.departmentErrorTypeIds='';
                    this.getPrombleList();
                });
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消修改"
                });
              });
          }
        }
      });
    },
    // 异常工单-----------------------------------------------------------------------------
    getabnormalList() {
      //异常工单列表
      getWorkOrderAbnormalPage(this.abnormalFrom).then(response => {
        response.data.data.rows.map(item => {
          if (item.compensationMethod) {
            item.compensationMethod = item.compensationMethod.split(",");
          }
        });
        this.abnormalList = response.data.data.rows;
        this.total = response.data.data.total;
        this.abnormalStatus = "created";
        this.abnormalEditShow = false;
        this.abnormalIndex = "-1";
        this.abnormalShow = true;
        this.$refs.abnormalFromMain.scrollTop = 0;
      });

      // abnormalList
    },
    handleFilterabnormal(times) {
      //异常工单查询
      this.abnormalFrom.page = 1;
      this.abnormalFrom.responsibleDepartment = this.responsibleDepartmentOtherIds;
      if (times) {
        this.abnormalFrom.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString();
        this.abnormalFrom.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString();
      }
      var time1 = Date.parse(this.abnormalFrom.workOrderStartTime);
      var time2 = Date.parse(this.abnormalFrom.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.getabnormalList();
      }
    },
    headleAbnormaldetils(row, index, formName) {
      // 异常工单详情进入
      // console.log(row,'异常工单详情进入')
      this.abnormalStatus = "update";
      this.responsibleDepartmentNames = row.responsibleDepartmentName;
      this.resdepartmentErrorTypeNames = row.departmentErrorTypeName;
      this.abnorStatus = "create";
      this.abnormalEdit = row;
      // this.abnormalShow = [];
      this.abnormalIndex = index;
      this.abnormalEditShow = false;
      this.abnormalShow = true;
      this.abnormalother = true;
      // this.$refs[formName].resetFields();

      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    handlerEditabnormal(row) {
      // 异常工单修改
      this.abnorStatus = "update";
      this.abnormalShow = row;
      this.abnormalEditShow = true;
      this.abnormalShow = false;
      this.responsibleDepartmentNames = row.responsibleDepartmentName;
      this.resdepartmentErrorTypeNames = row.departmentErrorTypeName;
      this.abnormalother = false;
    },
    handlerabnormalCancel(item, formName) {
      this.abnorStatus = "create";
      this.abnormalEditShow = false;
      this.abnormalShow = true;
      this.abnormalother = true;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    handlerSaveabnormal(item, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.resdepartmentErrorTypeNames == "") {
            this.$message({
              type: "warning",
              message: "部门失误类型不能为空"
            });
            return false;
          } else if (item.personLiable == "") {
            this.$message({
              type: "warning",
              message: "责任人不能为空"
            });
            return false;
          } else if (item.phone == "") {
            this.$message({
              type: "warning",
              message: "手机号不能为空"
            });
            return false;
          } else if (item.complaintContent == "") {
            this.$message({
              type: "warning",
              message: "投诉内容不能为空"
            });
            return false;
          } else if (item.processingResults == "") {
            this.$message({
              type: "warning",
              message: "处理结果不能为空"
            });
            return false;
          } else {
            const Saveabnormal = {
              id: item.id,
              orderId: item.orderId,
              personLiable: item.personLiable, //			责任人
              phone: item.phone, //		手机号
              platformNo: item.platformNo, //		第三方平台单号
              responsibleDepartment:
                this.responsibleDepartmentIds == ""
                  ? item.responsibleDepartment
                  : this.responsibleDepartmentIds, //		责任部门 1:客户责任 2:配送部 3:生产部 4:客服部 5:运营中心 6:系统责任
              departmentErrorType:
                this.departmentErrorTypeIds == ""
                  ? item.departmentErrorType
                  : this.departmentErrorTypeIds, //		部门失误类型
              complaintLevel: item.complaintLevel, //			投诉等级
              abnormalChannel: item.abnormalChannel, //异常渠道
              abnormalReason: item.abnormalReason, //异常原因
              refundAmount: item.refundAmount, //退款金额
              damages: item.damages, //赔偿金
              abnormalContent: item.abnormalContent, //异常内容
              processingResults: item.processingResults, //处理结果
              handleState: item.handleState //处理状态
            };
            // 异常工单修改提交保存
            this.$confirm("确定修改好该异常工单信息了吗, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                updateWorkOrderAbnormal(Saveabnormal).then(() => {
                  this.$message({
                    type: "success",
                    message: "保存成功"
                  });
                  this.abnormalStatus = "created";
                  this.getabnormalList();
                  this.abnormalEditShow = false;
                  this.abnormalShow = true;
                   this.responsibleDepartmentIds='';
                  this.departmentErrorTypeIds='';
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消修改"
                });
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handlerLogabnormal(item) {
      //异常日志
      this.reverse = false;
      this.LogFormVisible = true;
      OrderOperateLog({
        orderId: item.orderId
      }).then(response => {
        this.LogList = response.data.data;
      });
    },

    //退款start-----------------------------------------------------------------------------
    headleChargeback(row, index, formName) {
      //退款详情
      this.chargebackStatus = "update";
      this.Editrefund = "create";
      this.chargebackEdit = row;
      this.cakeCompensatePrice = row.cakeCompensatePrice;
      this.chargebackShow = row;
      this.chargebackIndex = index;

      this.chargebackEditotherShow = true;
      this.RequetrefundShows = true;
      this.RequetrefundShowsEdit = false;
      // this.$refs[formName].resetFields();
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    getabchargebackList() {
      //退款列表
      WorkOrderRefundPage(this.chargebackform).then(response => {
        this.chargebackList = response.data.data.rows;
        this.total = response.data.data.total;
        this.chargebackIndex = "-1";
        this.chargebackStatus = "create";
        this.RequetrefundShows = true;
        this.RequetrefundShowsEdit = false;
        this.$refs.refundmain.scrollTop = 0;
      });
    },
    handlePictureCardPreview(file) {
      //图片放大
      this.dialogImageUrl = file;
      this.dialogVisible = true;
    },
    handleterFifterRefund(times) {
      //退款查询
      this.chargebackform.page = 1;
      if (times) {
        this.chargebackform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString();
        this.chargebackform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString();
      }
      var time1 = Date.parse(this.chargebackform.workOrderStartTime);
      var time2 = Date.parse(this.chargebackform.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.getabchargebackList();
      }
    },
    strToJson(str) {
      try {
        let json = JSON.parse(str);
        return json;
      } catch (e) {
        return str;
      }
    },
    handlerLogrefund(item) {
      // 退款日志
      this.reverse = false;
      this.LogFormVisible = true;
      OrderOperateLog({
        orderId: item.orderId
      }).then(response => {
        this.LogList = response.data.data;
      });
    },
    handlerEditrefund(row) {
      this.Editrefund = "update";
      // this.imageUrl = row.refundCode;
      // console.log(this.imageUrl,'this.imageUrl')
      //退款详情编辑
      this.chargebackShow = row;
      this.RequetrefundShows = false;
      this.RequetrefundShowsEdit = true;
      this.chargebackEditotherShow = false;
      this.refundReasonNames = row.refundReasonName;
      this.refundTypeNames = row.refundTypeName;
      this.refundGradeNames = row.refundGradeName;
      this.cakeWhereNames = row.cakeWhereaboutsName;
    },
    handlerefundCancel(item, formName) {
      this.Editrefund = "create";
      this.RequetrefundShows = true;
      this.RequetrefundShowsEdit = false;
      this.chargebackEditotherShow = true;
      // this.chargebackShow = [];
      // this.$refs[formName].resetFields();
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    handlerabnormalrefund(item) {
      if (item.handleState == "1" || item.handleState == "4") {
        this.$message({
          type: "warning",
          message: "只有结案状态才能申请退款!"
        });
        return false;
      } else {
        this.AbnormalRefundVisible = true;
        // this.$confirm("确定申请退款,是否继续?", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning"
        //   })
        //   .then(() => {
        //     workOrderAbnormalLaunchRefund({
        //       workOrderAbnormalId: item.id
        //     }).then(
        //       () => {
        //         this.$message({
        //           type: "success",
        //           message: "申请退款成功!"
        //         });
        //         this.getabnormalList();
        //       }
        //     );
        //   })
        //   .catch(() => {
        //     this.$message({
        //       type: "info",
        //       message: "已取消申请退款"
        //     })
        //   });
      }
    },
    //异常工单 退款不退货
    handlerabnormalnotrefund(item) {
      if (item.handleState == "1" || item.handleState == "4") {
        this.$message({
          type: "warning",
          message: "只有结案状态才能申请退款不退货!"
        });
        return false;
      } else {
        this.AbnormalnotRefundVisible = true;
      }
    },

    acTiveArrStringFun(obj) {
      var arr = [];
      if (obj != null && obj.length != 0) {
        for (var i = 0; i < obj.length; i++) {
          arr.push(obj[i]);
        }
      }
      return arr.toString();
    },
    // headlerefundMode() {
    //   this.$notify({
    //     title: "警告",
    //     message: "该操作需点编辑按钮，才可进行赔偿方式选择",
    //     type: "warning"
    //   });
    // },
    headlecompensationMethod(item, goodsPrice) {
      console.log(goodsPrice, "goodsPrice");
      if (item == 1) {
        this.cakeCompensatePrice = goodsPrice;
      } else if (item == 2) {
        this.cakeCompensatePrice = goodsPrice / 2;
      } else if (item == 6) {
        this.cakeCompensatePrice = 0;
      }
    },
    handlerSaverefund(item, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var refundMoneys = "";
          if (item.refundMode == 1) {
            refundMoneys = item.refundMoney;
          }
          if (item.refundMode == 2) {
            var cakePrice = this.cakeCompensatePrice;
            let array1 = [
              item.sincerityGold * 100,
              cakePrice * 100,
              item.giveGiftPrice * 100,
              item.giveCakePrice * 100
            ];
            const reducer = (accumulator, currentValue) =>
              accumulator + currentValue;
            if (item.compensationMethod == 1) {
              refundMoneys = array1.reduce(reducer).toFixed(2); //退款金额
            } else if (item.compensationMethod == 2) {
              refundMoneys = array1.reduce(reducer).toFixed(2); //退���金额
            } else {
              refundMoneys = array1.reduce(reducer).toFixed(2); //退款金额
            }
          }

          if (this.refundTypeNames == "") {
            this.$message({
              type: "warning",
              message: "退款类型类型不能为空!"
            });
            return false;
          } else if (item.applyReason == "") {
            this.$message({
              type: "warning",
              message: "申请原因不能为空!"
            });
            return false;
          } else if (refundMoneys == "") {
            this.$message({
              type: "warning",
              message: "退款金额不能为空!"
            });
            return false;
          } else if (item.store == "") {
            this.$message({
              type: "warning",
              message: "门店不能为空!"
            });
            return false;
          } else {
            const Saverefund = {
              id: item.id,
              orderId: item.orderId,
              refundReason:
                this.refundReasonIds == ""
                  ? item.refundReason
                  : this.refundReasonIds, //退款原因
              refundType:
                this.refundTypeIds == "" ? item.refundType : this.refundTypeIds, // 退款类型
              refundGrade:
                this.refundGradeIds == ""
                  ? item.refundGrade
                  : this.refundGradeIds, // 退款等级
              refundMode: item.refundMode, // 退款方式
              refundMoney: refundMoneys, //退款金额
              approvalPass: item.approvalPass,
              compensationMethod: item.compensationMethod, //赔偿方式
              sincerityGold: item.sincerityGold, //诚意金
              cakeCompensatePrice: this.cakeCompensatePrice, //蛋糕金额
              giveCakePrice: item.giveCakePrice, //赠送的蛋糕价格
              giveGiftPrice: item.giveGiftPrice, //赠送的礼品价格
              applyReason: item.applyReason, //申请原
              store: item.store,
              refundCode: item.refundCode
            };
            // 退款详情保存
            console.log(Saverefund, "Saverefund", this.refundGradeIds);
            this.$confirm("确定修改好该退款工单信息了吗, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                updateWorkOrderRefund(Saverefund).then(() => {
                  this.$message({
                    type: "success",
                    message: "修改成功!"
                  });
                  this.getabchargebackList();
                  this.chargebackStatus = "create";
                  this.RequetrefundShows = true;
                  this.RequetrefundShowsEdit = false;
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消修改"
                });
              });
          }
        }
      });
    },

    handlerRequetrefund(item) {
      // 申请退款
      this.$confirm("确定申请退款,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          getApplyRefund({
            id: item.id,
            orderId: item.orderId
          }).then(() => {
            this.$message({
              type: "success",
              message: "申请退款成功!"
            });
            this.chargebackStatus = "create";
            this.getabchargebackList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消申请退款"
          });
        });
    },
    handlerApproved(item) {
      // 审批通过
      this.$confirm("确定审批通过,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ApprovalPass({
            id: item.id,
            orderId: item.orderId
          }).then(() => {
            this.$message({
              type: "success",
              message: "已审批通过!"
            });
            this.getabchargebackList();
            this.chargebackStatus = "create";
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审批通过"
          });
        });
    },
    handlerNotapproved(item) {
      this.$prompt("请输入不通过原因", "审批不通过", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          ApprovalNotPass({
            id: item.id,
            orderId: item.orderId,
            notPassReason: value
          }).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.getabchargebackList();
            this.chargebackStatus = "create";
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
      // 审批不通过
    },
    handleAvatarSuccess(res) {
      //退款二维码

      this.chargebackEdit.refundCode = res.data;

      // console.log(res.data, this.chargebackEdit, "erdddd");
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    // beforeAvatarUpload(file) {
    //   //退款二维码上传限制
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传头像图片只能是 JPG 格式 与 png格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
    },
    //工单查询
    getOrderList() {
      getWorkOrderQueryList(this.workorderform).then(response => {
        this.workorderlist = response.data.data;
        // console.log(this.workorderlist, this.workorderlist);
        // this.total = response.data.data.total;
      });
    },
    handleFilterwork(times) {
      this.workorderform.page = 1;
      if (times) {
        this.workorderform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString();
        this.workorderform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString();
      }
      var time1 = Date.parse(this.workorderform.workOrderStartTime);
      var time2 = Date.parse(this.workorderform.workOrderEndTime);
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        });
      } else {
        this.getOrderList();
      }
    },
    handelDialogReset() {
      this.AbnormalRefundVisible = false;
      this.abnormalShow = true;
      this.abnormalEditShow = false;
      this.abnormalStatus = "created";
      this.getabnormalList();
    },
    handelDialogResetnot() {
      this.AbnormalnotRefundVisible = false;
      this.abnormalShow = true;
      this.abnormalEditShow = false;
      this.abnormalStatus = "created";
      this.getabnormalList();
    },
    handelcomplaintDialogReset() {
      this.complaintRefundVisible = false;
      this.complaintEditShow = false;
      this.complaintShow = true;
      this.complaindialogStatus = "created";
      this.getComplaintList();
    },
    handelNotrefundReset() {
      this.NotrefundVisible = false;
      this.complaintEditShow = false;
      this.complaintShow = true;
      this.complaindialogStatus = "created";
      this.getComplaintList();
    }
  }
};
</script>
<style lang='scss'>
body {
  font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI,
    PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica,
    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

/* .el-form-item {
    margin-bottom: 10px !important;
  }
 */
.refundmodeytips {
  padding: 0 10px;
}

.el-timeline-item {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.app-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;

  .compensationMethod {
    padding-left: 40px;

    .el-form-item__label {
      text-align: left;
    }
  }

  .complainmain {
    .el-form-item {
      margin-bottom: 20px !important;
    }

    .el-form-item__label:before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }

  .refundCode {
    width: 40px;
    height: 40px;
    text-align: middle;
  }

  .grade {
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
    font-style: normal;
  }

  .red {
    color: #ff0000;
  }

  .tablist {
    display: flex;
    margin-bottom: 10px;

    .name {
      padding: 0 10px;
      text-align: center;
      color: #000;
      font-size: 20px;
      line-height: 40px;

      &.active {
        font-size: 20px;
        color: #43a0ff;
        border-bottom: 1px solid #43a0ff;
      }
    }
  }

  .workorder {
    padding: 20px;
    border: 1px solid #ccc;

    .el-form-item {
      margin-bottom: 22px !important;
    }

    .filter_container {
      display: block !important;

      .demo-form-inline {
        display: block !important;
      }
    }

    .work_list {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #606266;
      transition: 0.3s;
      // padding: 10px;
      margin-bottom: 10px;

      .nodata {
        text-align: center;
        color: #909399;
        line-height: 100px;
      }

      .credittype {
        width: 0;
        height: 0;
        float: right;
        font-size: xx-small;
        border-top: 60px solid #ffbc00;
        border-left: 60px solid transparent;
        position: relative;

        .tips {
          text-align: center;
          margin: auto;
          position: absolute;
          display: inline-block;
          width: 50px;
          right: 0;
          top: -50px;
          color: #fff;
          transform-origin: bottom center;
          transform: rotate(45deg);
          font-size: 12px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }

      .line {
        padding: 0 10px;
        line-height: 40px;
        color: #606266 !important;
        font-weight: 400 !important;

        p {
          display: flex;
          padding: 0;
          margin: 0;
        }

        em {
          font-style: normal;
          padding: 0 5px;
        }
      }

      .order-num {
        display: inline-block;
        position: relative;
        margin-top: 10px;
        line-height: 32px;
        background: #585a6e;
        color: #fff;
        text-align: center;
        margin-right: 20px;

        span {
          position: relative;
          z-index: 9;
          font-size: 20px;
        }

        i {
          display: block;
          position: absolute;
          right: -9px;
          top: 7px;
          width: 18px;
          height: 19px;
          background: #585a6e;
          -webkit-transform: rotate(55deg) skewX(25deg);
          transform: rotate(55deg) skewX(25deg);
          z-index: 0;
        }
      }

      .work_lists {
        padding: 0 10px;
        display: flex;
        justify-content: space-between;

        .line {
          padding: 0 5px;
          line-height: 40px;
          color: #606266 !important;
          font-weight: 400 !important;

          p {
            display: flex;
          }

          em {
            font-style: normal;
            padding: 0 5px;
          }
        }
      }
    }

    /* 投诉 */
    .Complaint,
    .abnormal,
    .problemTicket,
    .refund,
    .damage {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .damagemain,
      .Complaintmain,
      .problemTicketmain,
      .refundmain {
        width: 60%;
        overflow-y: scroll;
        height: 930px;

        .Complaint_list,
        .damage_list,
        .problemTicket_list,
        .refund_list {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          border: 1px solid #ebeef5;
          background-color: #fff;
          overflow: hidden;
          color: #606266;
          transition: 0.3s;
          // height: 240px;
          // padding: 10px;
          margin-bottom: 10px;
          position: relative;

          .nodata {
            text-align: center;
            color: #909399;
            line-height: 100px;
          }

          .imgurl {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            position: absolute;
            top: 10%;
            right: 10px;
          }

          .credittype {
            width: 0;
            height: 0;
            float: right;
            font-size: xx-small;
            border-top: 60px solid #ffbc00;
            border-left: 60px solid transparent;
            position: relative;

            .tips {
              text-align: center;
              margin: auto;
              position: absolute;
              display: inline-block;
              width: 50px;
              right: 0;
              top: -50px;
              color: #fff;
              transform-origin: bottom center;
              transform: rotate(45deg);
              font-size: 12px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }

          .credittype.yb {
            width: 0;
            height: 0;
            float: right;
            font-size: xx-small;
            border-top: 60px solid #ffbc00;
            border-left: 60px solid transparent;
            position: relative;
          }

          .credittype.zd {
            width: 0;
            height: 0;
            float: right;
            font-size: xx-small;
            border-top: 60px solid #f77b02;
            border-left: 60px solid transparent;
            position: relative;
          }

          .credittype.jj {
            width: 0;
            height: 0;
            float: right;
            font-size: xx-small;
            border-top: 60px solid #fd5a5a;
            border-left: 60px solid transparent;
            position: relative;
          }

          .credittype.warning {
            width: 0;
            height: 0;
            float: right;
            font-size: xx-small;
            border-top: 60px solid #ff0000;
            border-left: 60px solid transparent;
            position: relative;
          }

          .credittype.finish {
            width: 0;
            height: 0;
            float: right;
            font-size: xx-small;
            border-top: 60px solid #cccccc;
            border-left: 60px solid transparent;
            position: relative;
          }

          .line {
            padding: 0 10px;
            line-height: 40px;
            color: #606266 !important;
            font-weight: 400 !important;

            p {
              display: flex;
              padding: 0;
              margin: 0;
            }

            em {
              font-style: normal;
              padding: 0 5px;
            }
          }

          .order-num {
            display: inline-block;
            position: relative;
            margin-top: 10px;
            line-height: 32px;
            background: #585a6e;
            color: #fff;
            text-align: center;
            margin-right: 20px;

            span {
              position: relative;
              z-index: 9;
              font-size: 20px;
            }

            i {
              display: block;
              position: absolute;
              right: -9px;
              top: 7px;
              width: 18px;
              height: 19px;
              background: #585a6e;
              -webkit-transform: rotate(55deg) skewX(25deg);
              transform: rotate(55deg) skewX(25deg);
              z-index: 0;
            }
          }

          .Complaint_lists,
          .refund_lists,
          .damage_lists {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;

            .line {
              padding: 0 5px;
              line-height: 40px;
              color: #606266 !important;
              font-weight: 400 !important;

              p {
                display: flex;
              }

              em {
                font-style: normal;
                padding: 0 5px;
              }
            }
          }
        }
      }

      .Complaint_con,
      .problemTicket_con,
      .refund_con,
      .abnormal_con,
      .damage_con {
        width: 37%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border: 1px solid #ebeef5;
        background-color: #fff;
        overflow: hidden;
        /* // overflow-y: scroll;s */
        color: #606266;
        transition: 0.3s;
        // height: 500px;
        padding: 10px;
        margin-bottom: 10px;

        .el-form-item {
          margin-bottom: 22px !important;
        }

        .processingResults {
          width: 240px;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
        }

        &.Nodata {
          height: 100px;
          font-weight: bold;
          text-align: center;
          line-height: 100px;
          margin-bottom: 10px;
        }

        .inputType {
          width: 200px;
        }
      }

      /*
        // .abnormal_con {
        //   height: 500px;
        // }
        // .damage_con {
        //   height: 380px;
        // }
        // .refund_con {
        //   height: 780px;
        // }
        // .problemTicket_con {
        //   height: 540px;
        // }
        // .Complaint_con {
        //   height: 680px;
        // } */
    }
  }

  p {
    margin: 0;
    padding: 0;
  }

  .lows {
    display: flex;
  }

  .buttontips {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
  }

  .flex {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: auto;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }

  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
}
</style>
